JQuery checkboxes and .is (": checked")

Question

When I bind a function to a checkbox element, for example:

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

The checkbox changes its checked attribute to , the event is triggered, this is normal behavior and gives the opposite result.

However, when I do this:

 $("#myCheckbox").click(); 

The checkbox changes the checked attribute after . The event is fired.

My question is, is there a way to trigger a click event from jQuery, like a regular click (first script)?

PS: I already tried with trigger('click') ;

Answer 1

 $('#myCheckbox').change(function () { if ($(this).prop("checked")) { // checked return; } // not checked }); 

Note: in older versions of jquery it was ok to use attr . Now he suggested using prop to read the state.

Answer 2

There is work that works in jQuery 1.3.2 and 1.4.2 :

 $("#myCheckbox").change( function() { alert($(this).is(":checked")); }); //Trigger by: $("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​ 

But I agree, this behavior seems to be a mistake compared to its own event.

Answer 3

As of June 2016 (using jquery 2.1.4), none of the other proposed solutions are working. Checking attr('checked') always returns undefined , and is('checked) always returns false .

Just use the prop method:

 $("#checkbox").change(function(e) { if ($(this).prop('checked')){ console.log('checked'); } }); 

Answer 4

I am still experiencing this behavior with jQuery 1.7.2. A simple workaround is to delay the execution of the click handler using setTimeout and let the browser do its magic in the meantime:

 $("#myCheckbox").click( function() { var that = this; setTimeout(function(){ alert($(that).is(":checked")); }); }); 

Answer 5

If you expect this rather undesirable behavior, then one of them will pass an additional parameter from jQuery.trigger () to the click handler. This additional parameter is intended to notify the click handler who clicked programmatically, and not by the user, by directly clicking on the check box. Then the click handler can invert the registered check status.

So, here is how I can trigger the click event on the checkbox with the id "myCheckBox". Note that I also pass a parameter to the object with one member, nonUI, which is set to true:

 $("#myCheckbox").trigger('click', {nonUI : true}) 

And this is how I handle this in the checkbox event handler. The handler function checks for a nonUI object as the second parameter. (The first parameter is always the event itself.) If the parameter is present and set to true, I will invert the registered .checked status. If such a parameter is not passed - which will not happen if the user simply clicks on the checkbox in the user interface - then I report the current .checked status:

 $("#myCheckbox").click(function(e, parameters) { var nonUI = false; try { nonUI = parameters.nonUI; } catch (e) {} var checked = nonUI ? !this.checked : this.checked; alert('Checked = ' + checked); }); 

JSFiddle version at http://jsfiddle.net/BrownieBoy/h5mDZ/

I tested Chrome, Firefox, and IE 8.

Answer 6

 <input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true"> var atrib = $('.mycheck').attr("unchecked",true); $('.mycheck').click(function(){ if ($(this).is(":checked")) { $('.mycheck').attr("unchecked",false); alert("checkbox checked"); } else { $('.mycheck').attr("unchecked",true); alert("checkbox unchecked"); } }); 

Answer 7

  $("#checkbox").change(function(e) { if ($(this).prop('checked')){ console.log('checked'); } }); 

Answer 8

Well, to fit the first scenario, this is what I came up with.

http://jsbin.com/uwupa/edit

Essentially, instead of attaching a click event, you associate a change event with a warning.

Then, when you fire the event, you fire up the click first, and then trigger the change.

Answer 9

In addition to Nick Craver's answer, in order to work correctly on IE 8 you need to add an additional flag:

 // needed for IE 8 compatibility if ($.browser.msie) $("#myCheckbox").click(function() { $(this).trigger('change'); }); $("#myCheckbox").change( function() { alert($(this).is(":checked")); }); //Trigger by: $("#myCheckbox").trigger('click').trigger('change'); 

Otherwise, the callback will only work when the flag loses focus, since IE 8 keeps focus on the flags and radios when pressed.

_{Not tested on IE 9 though.}

Answer 10

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

Answer 11

 $("#personal").click(function() { if ($(this).is(":checked")) { alert('Personal'); /* var validator = $("#register_france").validate(); validator.resetForm(); */ } } ); 

JSFIDDLE

Answer 12

The fastest and easiest way :

 $('#myCheckbox').change(function(){ alert(this.checked); }); 

---

 $el[0].checked; 

$ el is the jquery element of the selection.

Enjoy it!

Answer 13

 if ($.browser.msie) { $("#myCheckbox").click(function() { $(this).trigger('change'); }); } $("#myCheckbox").change(function() { alert($(this).is(":checked")); });