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

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

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"
    }
}