Search code examples
javascripthtmlgoogle-chrome-extensiongoogle-chrome-app

javascript : How to handle chage event handler for multiple checkbox in single function and print whick checkbox clicked

Description

i have multiple checkbox and want handle all checkbox click event in single handler function and want to know which is checked.i tried below code and not working

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#Checkbox1').addEventListener('change', changeHandler("Checkbox1"));
    document.querySelector('#Checkbox2').addEventListener('change', changeHandler("Checkbox2"));
    document.querySelector('#Checkbox3').addEventListener('change', changeHandler("Checkbox3"));
    document.querySelector('#Checkbox4').addEventListener('change', changeHandler("Checkbox4"));
    document.querySelector('#Checkbox5').addEventListener('change', changeHandler("Checkbox5"));
});
function changeHandler(checkboxs) {
    //Do Something...maybe another function showAlert(), for instance
    if (checkboxs.checked) {
        console.log("Checkbox checked");
    }
    else {
        console.log("Checkbox unchecked");
    }
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
    <div>
    Checkbox1: <input type="checkbox" id="Checkbox1">
  </div>
    <div>
    Checkbox2: <input type="checkbox" id="Checkbox2">
  </div>
    <div>
    Checkbox3: <input type="checkbox" id="Checkbox3">
  </div>
    <div>
    Checkbox4: <input type="checkbox" id="Checkbox4">
  </div>
  <div>
    Checkbox5: <input type="checkbox" id="Checkbox5">
  </div>
</body>
</html>

Solution

  • The first problem with your code is that you are calling changeHandler rather than assigning it to the listener. You can fix this by changing each one to an anonymous function that in turn calls the handler:

    document.querySelector('#Checkbox1').addEventListener('change', () => changeHandler("Checkbox1"));

    Which will lead you to your next problem which is that you are passing a string, eg. 'Checkbox1', but then trying to check if the element is checked directly on this string which will always return false ('Checkbox1'.checked === undefined). To fix that you will need to use the passed string to query the element first:

    function changeHandler(checkboxs) {
    const checkbox = document.getElementById(checkboxs)
    
    if (checkbox && checkbox.checked) {
        console.log("Checkbox checked");
    }
    else {
        console.log("Checkbox unchecked");
    }
}

    Final working example:

    document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('#Checkbox1').addEventListener('change', () => changeHandler("Checkbox1"));
    document.querySelector('#Checkbox2').addEventListener('change', () => changeHandler("Checkbox2"));
    document.querySelector('#Checkbox3').addEventListener('change', () => changeHandler("Checkbox3"));
    document.querySelector('#Checkbox4').addEventListener('change', () => changeHandler("Checkbox4"));
    document.querySelector('#Checkbox5').addEventListener('change', () => changeHandler("Checkbox5"));
});

function changeHandler(checkboxs) {
    const checkbox = document.getElementById(checkboxs)

    if (checkbox && checkbox.checked) {
        console.log("Checkbox checked");
    }
    else {
        console.log("Checkbox unchecked");
    }
}
    <!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
    <div>
    Checkbox1: <input type="checkbox" id="Checkbox1">
  </div>
    <div>
    Checkbox2: <input type="checkbox" id="Checkbox2">
  </div>
    <div>
    Checkbox3: <input type="checkbox" id="Checkbox3">
  </div>
    <div>
    Checkbox4: <input type="checkbox" id="Checkbox4">
  </div>
  <div>
    Checkbox5: <input type="checkbox" id="Checkbox5">
  </div>
</body>
</html>

    But you can avoid all of the repetition, as well as the use of anonymous functions by using event delegation (see What is DOM Event delegation? for discussion). A single listener is attached to the document and the implicitly passed event is checked, in this case for type === 'checkbox', if it satisfies our conditions we operate on it.

    document.addEventListener('DOMContentLoaded', function () {
  document.addEventListener('change', changeHandler);
});

function changeHandler(event) {
  if (event.target.type === 'checkbox') {
    if (event.target.checked) {
      console.log(`Checkbox with id: ${event.target.id} checked`);
    }
    else {
      console.log("Checkbox unchecked");
    }
  }
}
    <!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
    <div>
    Checkbox1: <input type="checkbox" id="Checkbox1">
  </div>
    <div>
    Checkbox2: <input type="checkbox" id="Checkbox2">
  </div>
    <div>
    Checkbox3: <input type="checkbox" id="Checkbox3">
  </div>
    <div>
    Checkbox4: <input type="checkbox" id="Checkbox4">
  </div>
  <div>
    Checkbox5: <input type="checkbox" id="Checkbox5">
  </div>
</body>
</html>