jQuery checkbox checked state changed event

Question

I want an event to fire client side when a checkbox is checked / unchecked:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

Basically I want it to happen for every checkbox on the page. Is this method of firing on the click and checking the state ok?

I'm thinking there must be a cleaner jQuery way. Anyone know a solution?

Nicolanicolai

@Arif I don't think they're duplicates because the linked question is about getting the state of a checkbox, while this one is about a checked event. – Ensoul

I always have to search for this checked property, there are many ways to achieve this as written here – Giuditta

Answer 1

Bind to the change event instead of click. However, you will probably still need to check whether or not the checkbox is checked:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

The main benefit of binding to the change event over the click event is that not all clicks on a checkbox will cause it to change state. If you only want to capture events that cause the checkbox to change state, you want the aptly-named change event. Redacted in comments

Also note that I've used this.checked instead of wrapping the element in a jQuery object and using jQuery methods, simply because it's shorter and faster to access the property of the DOM element directly.

Edit (see comments)

To get all checkboxes you have a couple of options. You can use the :checkbox pseudo-selector:

$(":checkbox")

Or you could use an attribute equals selector:

$("input[type='checkbox']")

Recording

Actually I've got it looking for the checkbox by the class. Is there a better way to just get all checkboxes regardless of class? – Nicolanicolai

You can do $('input[type='checkbox']').change() to get all checkboxes – Infeudation

@Nicolanicolai - See my edit. There are a couple of ways to do it. – Recording

@Infeudation - Actually, clicking a label does trigger the click event on the associated control: jsfiddle.net/ZFG84 – Recording

This is much cleaner than $(this).is(':checked'). I thought you had to use the change event if you want to detect changes from the keyboard (tabbing, hitting space), but surprisingly, click also detects changes that aren't from a mouse click, not sure if it's a jQuery thing, jsfiddle.net/mendesjuan/E39sz – Ferreous

@JuanMendes - It's not a jQuery thing. It's an accessibility thing. If developers bind to the click event, what are users who are forced to use the keyboard or some other input method going to do? – Recording

@JamesAllardice: Very true, new fiddle that binds to the click event without jQuery, and still responds to changes with the keyboard: jsfiddle.net/mendesjuan/E39sz/1 – Ferreous

"not all clicks on a checkbox will cause it to change state" - Are you sure? What's an example of a way to click so it doesn't change state? – Wax

@Wax - Hmmm. No, I'm not sure. Re-reading I belive I'm wrong on that. – Recording

@JamesAllardice Huh, not sure why I thought that! Thanks for correcting me. +1 – Infeudation

Please note: Binding any event click, change or whatever to all checkboxes on the page can cause performance issues (depepending on the amount of checkboxes). Try binding to the parent element or the document and capturing the bubbled event i.e. $('form').on('change', ':checkbox', function(){ //stuff }); – Beichner

you can get the value of the checked box use this.value – Wizened

this doesn't worked for me. i changed the IF block to if($(this).is(':checked')){ ` //Do stuff` } and it worked – Messiah

It's better to use the on event because it retains the event when the css/prop changes (for dynamically created check boxes like the ones created within a template): $(document).on("change", "#check-select-all", function (e) { if (this.checked) { } }); – Sherri

Answer 2

For future reference to anyone here having difficulty, if you are adding the checkboxes dynamically, the correct accepted answer above will not work. You'll need to leverage event delegation which allows a parent node to capture bubbled events from a specific descendant and issue a callback.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Note that it's almost always unnecessary to use document for the parent selector. Instead choose a more specific parent node to prevent propagating the event up too many levels.

The example below displays how the events of dynamically added dom nodes do not trigger previously defined listeners.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

While this example displays the usage of event delegation to capture events for a specific node (h1 in this case), and issue a callback for such events.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Append

NOTE: For parent (in above example: #post-list), you must use the element of document that is NOT being dynamically created. In my case, the div that holds the partial view. – Fimbriation

Answer 3

Just another solution

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

Ribosome

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Linus

Answer 4

If your intention is to attach event only on checked checkboxes (so it would fire when they are unchecked and checked later again) then this is what you want.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

if your intention is to attach event to all checkboxes (checked and unchecked)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

if you want it to fire only when they are being checked (from unchecked) then @James Allardice answer above.

BTW input[type='checkbox']:checked is CSS selector.

Dew

What if you want to find only not-checked checkboxes? I have this for all checked $("#tableUSNW tbody tr td[id=td1] :checkbox:checked"); but I don't know how to find all non-checked. – Twotime

@Twotime try following: $("input[type='checkbox']:not(:checked)") – Dew

Answer 5

Is very simple, this is the way I use:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

Regards!

Anuran

Answer 6

$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

Willingham

Answer 7

This is the solution to find is the checkbox is checked or not. Use the #prop() function//

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

Expansive

Answer 8

It can also be accomplished as below. When the checkbox is fired, the div or control with #checkbox id is hiddden or is shown otherwise.

 <script>
      $('#checkbox').on('click',function(){
          if(this.checked){
              $('#checkbox').hide();
           }else{
              $('#checkbox').show();
           }
      });
 </script>

Dictograph

Answer 9

Action taking based on an event (on click event).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Without event taking action based on current state.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

Tribadism

on 'click' event doesn't work in this case. on 'change' works. – Pifer

Answer 10

Try this "html-approach" which is acceptable for small JS projects

function msg(animal,is) {
  console.log(animal, is.checked);   // Do stuff
}

<input type="checkbox" oninput="msg('dog', this)" />Do you have a dog? <br>
<input type="checkbox" oninput="msg('frog',this)" />Do you have a frog?<br>
...

Radicand

Answer 11

perhaps this may be an alternative for you.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

Dapple

Answer 12

Try this jQuery validation

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

Nannana

Answer 13

the key is: use prop but not attr to query the checked status, e.g.

• correct: jQuery('#my_check_tag').prop('checked') // return correct status
• incorrect: jQuery('#my_check_tag').attr('checked') // always return undefined

Lindley