点击href链接后显示div

Question

I solve my first issue to show one or two div based on checkbox selection ( Show multiple div after click button only if checkbox are checked - thanks @J4k3z).

My code is:

$div1 = $(".div1");
$div2 = $(".div2");

$div1.hide()
$div2.hide()

function showDiv(){
    if(document.getElementById('chk1').checked){    
        $div1.show()
    } else {
        $div1.hide()
    }
    if(document.getElementById('chk2').checked){
        $div2.show()
    } else {
        $div2.hide()
    }
}

<input type="checkbox" id="chk1" placeholder="Yes">
<label>Div 1</label>
<input type="checkbox" id="chk2" placeholder="Yes">
<label>Div 2</label>
<br />
<button onClick="showDiv()">Check!</button>
<br />
<div class="div1">Div no 1</div>
<div class="div2">Div no 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This code run by button. Is it possible to replace button with href link?

Answer 1

yes, for this you need to use an addEventListener() method.

In your HTML, you have to make a link with an id

<a id='link-id' href='#'>some link</a>

Then in javascript, add an event listener on this link

$('#link-id').addEventListener('click', showDiv)

---

Another way you can try is using the .onclick() method(from here )

$('#link-id').onclick = showDiv;