Checkbox Check Event Listener
Short answer: Use the change event. Here's a couple of practical examples. Since I misread the question, I'll include jQuery examples along with plain JavaScript. You're not gaining much, if anything, by using jQuery though.
Single checkbox
Using querySelector.
var checkbox = document.querySelector("input[name=checkbox]");checkbox.addEventListener('change', function() { if (this.checked) { console.log("Checkbox is checked.."); } else { console.log("Checkbox is not checked.."); }});<input type="checkbox" name="checkbox" />Single checkbox with jQuery
$('input[name=checkbox]').change(function() { if ($(this).is(':checked')) { console.log("Checkbox is checked..") } else { console.log("Checkbox is not checked..") }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="checkbox" name="checkbox" />Multiple checkboxes
Here's an example of a list of checkboxes. To select multiple elements we use querySelectorAll instead of querySelector. Then use Array.filter and Array.map to extract checked values.
// Select all checkboxes with the name 'settings' using querySelectorAll.var checkboxes = document.querySelectorAll("input[type=checkbox][name=settings]");let enabledSettings = []/*For IE11 support, replace arrow functions with normal functions anduse a polyfill for Array.forEach:https://vanillajstoolkit.com/polyfills/arrayforeach/*/// Use Array.forEach to add an event listener to each checkbox.checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { enabledSettings = Array.from(checkboxes) // Convert checkboxes to an array to use filter and map. .filter(i => i.checked) // Use Array.filter to remove unchecked checkboxes. .map(i => i.value) // Use Array.map to extract only the checkbox values from the array of objects. console.log(enabledSettings) })});<label> <input type="checkbox" name="settings" value="forcefield"> Enable forcefield</label><label> <input type="checkbox" name="settings" value="invisibilitycloak"> Enable invisibility cloak</label><label> <input type="checkbox" name="settings" value="warpspeed"> Enable warp speed</label>Multiple checkboxes with jQuery
let checkboxes = $("input[type=checkbox][name=settings]")let enabledSettings = [];// Attach a change event handler to the checkboxes.checkboxes.change(function() { enabledSettings = checkboxes .filter(":checked") // Filter out unchecked boxes. .map(function() { // Extract values using jQuery map. return this.value; }) .get() // Get array. console.log(enabledSettings);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><label> <input type="checkbox" name="settings" value="forcefield"> Enable forcefield</label><label> <input type="checkbox" name="settings" value="invisibilitycloak"> Enable invisibility cloak</label><label> <input type="checkbox" name="settings" value="warpspeed"> Enable warp speed</label>
Since I don't see the jQuery tag in the OP, here is a javascript only option :
document.addEventListener("DOMContentLoaded", function (event) { var _selector = document.querySelector('input[name=myCheckbox]'); _selector.addEventListener('change', function (event) { if (_selector.checked) { // do something if checked } else { // do something else otherwise } });});See JSFIDDLE
If you have a checkbox in your html something like:
<input id="conducted" type = "checkbox" name="party" value="0">
and you want to add an EventListener to this checkbox using javascript, in your associated js file, you can do as follows:
checkbox = document.getElementById('conducted');checkbox.addEventListener('change', e => { if(e.target.checked){ //do something }});