Catch checked change event of a checkbox

Question

How do I to catch check/uncheck event of <input type="checkbox" /> with jQuery?

If you are using a relatively new version of JQuery, i would use the .on('change', function(){...}) as mentioned in @Daniel De Leon's answer below. An advantage, the "on" event listener will bind to dynamically generated html. — BLang, Mar 08 '18 at 14:31

score 179 · Accepted Answer · edited May 23 '17 at 12:02

179

<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

Edit: Doing this will not catch when the checkbox changes for other reasons than a click, like using the keyboard. To avoid this problem, listen to changeinstead of click.

For checking/unchecking programmatically, take a look at Why isn't my checkbox change event triggered?

edited May 23 '17 at 12:02

Community

1
1

answered Sep 21 '09 at 15:50

marcgg

65,020
52
178
231

document.getElementById('something').checked works,why $('#something').checked not work? – omg Sep 21 '09 at 15:52
Your code is missing a paran, and really should use the jQuery way of getting the check state. – Pete Michaud Sep 21 '09 at 15:53
Because $('#something') returns a jQuery object not an ElementNode – Dmitri Farkov Sep 21 '09 at 15:53
2

Shore: the reason getElementById works is that it returns a DOM element, whereas the $ jQuery function returns a jQuery object. The jQuery object has the DOM element as a property, but it is not, itself, a DOM object. – Pete Michaud Sep 21 '09 at 15:54
this.checked should work... try making an alert(this) an check that you have the correct element. – marcgg Sep 21 '09 at 16:17
3

I know I'm arriving late to the party, but this only works when a "click" event triggers this. If for some reason you were to do something like this elsewhere in the code: $("#something").attr("checked", "checked") the click event would never get triggered. – David Stinemetze Jan 04 '12 at 22:23
3

@DavidStinemetze: I'd say that you could listen ton `change` instead of click. I'm updating the answer – marcgg Jan 12 '12 at 14:55
I also think `change` is better than `clicked`. – imns Sep 05 '14 at 15:57
Why add a note about using change event but not change the demo code?. – M H Dec 17 '15 at 04:59

score 45 · Answer 2 · answered Jan 04 '12 at 08:31

45

The click will affect a label if we have one attached to the input checkbox?

I think that is better to use the .change() function

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

answered Jan 04 '12 at 08:31

Dídac Rios

451
4
2

1

This should be the accepted answer, as the question is about listening for a check event, not a click event. – Jessica May 23 '19 at 08:57

karim79 · Answer 3 · 2009-09-21T15:58:53.320

28

Use the :checked selector to determine the checkbox's state:

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});

edited Sep 21 '09 at 15:58

answered Sep 21 '09 at 15:51

karim79

339,989
67
413
406

score 14 · Answer 4 · answered Jun 18 '14 at 20:56

14

For JQuery 1.7+ use:

$('input[type=checkbox]').on('change', function() {
  ...
});

answered Jun 18 '14 at 20:56

Daniel De León

13,196
5
87
72

score 8 · Answer 5 · edited Sep 07 '16 at 15:32

8

This code does what your need:

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

Also, you can check it on jsfiddle

edited Sep 07 '16 at 15:32

RredCat

5,259
5
60
100

answered Sep 07 '16 at 13:35

Deepak saini

4,100
2
17
20

score 4 · Answer 6 · edited Aug 15 '16 at 11:52

Use below code snippet to achieve this.:

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

Or you can do the same with single check box:

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

For demo: http://jsfiddle.net/creativegala/hTtxe/

score 3 · Answer 7 · answered Apr 27 '15 at 05:30

3

In my experience, I've had to leverage the event's currentTarget:

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

answered Apr 27 '15 at 05:30

Brandon Aaskov

342
3
8

score 2 · Answer 8 · answered Sep 21 '09 at 15:48

2

use the click event for best compatibility with MSIE

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

answered Sep 21 '09 at 15:48

Ty W

6,694
4
28
36

How to judge if it's checked on or not? – omg Sep 21 '09 at 15:50
I need to know whether a click mean to check or uncheck it. – omg Sep 21 '09 at 15:50
1

you can then use $(this).is(':checked') to test the state of the just-clicked item – Ty W Sep 21 '09 at 15:52

score -1 · Answer 9 · edited Dec 20 '17 at 12:35

$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML:

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

Looks like a range selection (ie, check the first item, hold shift down, check the last one; and all the ones between are checked.) However, this is much more than the question asks for. Missing some code though, like checkUncheckAll(). — joelsand, Jul 06 '11 at 02:03

Catch checked change event of a checkbox

9 Answers9

Linked