How to show div if one of the checkboxes is checked (with different name on each checkbox)-CodePudding

I am trying to show div if one of two checkboxes is checked, I found it in some article but with same name, I am using 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

CodePudding user response：

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.checked) || (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">This is the element that will be shown if both checkboxes aren't checked</div>

CodePudding user response：

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