How to show div, if one of the checkboxes is checked (with a different name on each checkbox)?

Question

I am trying to show div if one of the two checkboxes is checked. I found it in some article but with the same name, I am using a different name for each checkbox to store it into mysql. My current javascript code is

document.addEventListener('change', function(jj) {
  function jj() {
    if ((document.getElementById('jj1_ikk').checked) || (document.getElementById('jj2_ikk').checked)) {
      document.getElementById('jsa').style.display="block";
    } else {
      document.getElementById('jsa').style.display="none";
    }
  }
})

the input fields are

<input type="checkbox" id="jj1_ikk" name="jj1_ikk" /><label for="jj1_ikk">A</label>
<input type="checkbox" id="jj2_ikk" name="jj2_ikk" /><label for="jj2_ikk">B</label>

where jj1_ikk and jj2_ikk are the checkboxes id, and jsa is the div that I want to do show/hide.

I hope my description is clear, thank you.

Answer 1

You did a mistake when adding the handler for the change event defining two nested functions. Plus I added the event handler only once the document was loaded. You can test the code in this snippet:

 //when the document has been loaded, adds the event handlers to the checkboxes document.addEventListener("DOMContentLoaded", () => { document.addEventListener('change', () => addHandlers()); }); /** * Adds handler for the change event on both checkboxes */ function addHandlers(){ let jj1 = document.getElementById('jj1_ikk'); let jj2 = document.getElementById('jj2_ikk'); jj1.addEventListener('change', updateMsgVisibility); jj2.addEventListener('change', updateMsgVisibility); } /** * Show/Hide #jsa based on checkboxes status */ function updateMsgVisibility(){ let jj1 = document.getElementById('jj1_ikk'); let jj2 = document.getElementById('jj2_ikk'); if ( (jj1 && (jj1.checked)) || (jj2 && (jj2.checked)) ) { document.getElementById('jsa').style.display="block"; } else { document.getElementById('jsa').style.display="none"; } }

 <input type="checkbox" id="jj1_ikk" name="jj1_ikk" /><label for="jj1_ikk">A</label> <input type="checkbox" id="jj2_ikk" name="jj2_ikk" /><label for="jj2_ikk">B</label> <div id="jsa" style="display:none;">This is the element that will be shown if both checkboxes aren't checked</div>

Answer 2

You can put two check box in span and check changes onclick span like this

HTML

<span onclick="CheckChanges()">
    <input type="checkbox" id="jj1_ikk" name="jj1_ikk" /><label for="jj1_ikk">A</label>
    <input type="checkbox" id="jj2_ikk" name="jj2_ikk" /><label for="jj2_ikk">B</label>
</span>

<div id="jsa">This is the element that will be shown if both checkboxes aren't checked</div>

JavaScript

var aCheckBox = document.getElementById("jj1_ikk")
var bCheckBox = document.getElementById("jj2_ikk")

function CheckChanges() {
    if (aCheckBox.checked == true || bCheckBox.checked == true) {
        document.getElementById("jsa").style.display = "block"
    } else {
        document.getElementById("jsa").style.display = "none"
    }
}