How to listen to when a checkbox is checked in Jquery

Jquery

Jquery Problem Overview


I need to know when any checkbox on the page is checked:

e.g.

<input type="checkbox">

I tried this in Jquery

$('input type=["checkbox"]').change(function(){
alert('changed');
});

But it didn't work, any ideas?

Jquery Solutions


Solution 1 - Jquery

Use the change() event, and the is() test:

$('input:checkbox').change(
    function(){
        if ($(this).is(':checked')) {
            alert('checked');
        }
    });

I've updated the above, to the following, because of my silly reliance on jQuery (in the if) when the DOM properties would be equally appropriate, and also cheaper to use. Also the selector has been changed, in order to allow it to be passed, in those browsers that support it, to the DOM's document.querySelectorAll() method:

$('input[type=checkbox]').change(
    function(){
        if (this.checked) {
            alert('checked');
        }
    });

For the sake of completion, the same thing is also easily possible in plain JavaScript:

var checkboxes = document.querySelectorAll('input[type=checkbox]'),
    checkboxArray = Array.from( checkboxes );

function confirmCheck() {
  if (this.checked) {
    alert('checked');
  }
}

checkboxArray.forEach(function(checkbox) {
  checkbox.addEventListener('change', confirmCheck);
});


References:

Solution 2 - Jquery

$('input:checkbox').live('change', function(){
    if($(this).is(':checked')){
        alert('checked');
    } else {
        alert('un-checked');
    }
});

jsfiddle: http://jsfiddle.net/7Zg3x/1/

Solution 3 - Jquery

$('input:checkbox').change(function(){
    if($(this).is(':checked')){
        alert('Checked');
    }
});

Here is a demo

Solution 4 - Jquery

Try this

$('input:checkbox').change(function(){
   if(this.checked)
      alert('checked');
   else
      alert('not checked');
});

Solution 5 - Jquery

If you want to use .on this works

 jQuery('input[type=checkbox]').on('change', function() {
   if (this.checked) {
     console.log('checked');
   }
 });

Solution 6 - Jquery

$("input:checkbox").change(function(){

alert($(this).val());

});

here is the fiddle http://jsfiddle.net/SXph5/

jquery change

Solution 7 - Jquery

$("input[type='checkbox']").click(function(){
    alert("checked"); 
});

Just a normal .click will do.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJordashView Question on Stackoverflow
Solution 1 - JqueryDavid ThomasView Answer on Stackoverflow
Solution 2 - JqueryJasperView Answer on Stackoverflow
Solution 3 - JqueryShefView Answer on Stackoverflow
Solution 4 - JqueryShankarSangoliView Answer on Stackoverflow
Solution 5 - JqueryDanielView Answer on Stackoverflow
Solution 6 - JqueryRafayView Answer on Stackoverflow
Solution 7 - JquerydottyView Answer on Stackoverflow