JQuery、复选框和. is (“ : 勾选”)

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

Note: In older versions of jquery it was OK to use attr. Now it's suggested to use prop to read the state.

Well, to match the first scenario, this is something I've come up with.

http://jsbin.com/uwupa/edit

Essentially, instead of binding the "click" event, you bind the "change" event with the alert.

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

There is a work-around 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 buggy compared to the native event.

In addition to Nick Craver's answer, for this to work properly on IE 8 you need to add a additional click handler to the checkbox:

// 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 be triggered when the checkbox loses focus, as IE 8 keeps focus on checkboxes and radios when they are clicked.

_{Haven't tested on IE 9 though.}

If you anticipate this rather unwanted behaviour, then one away around it would be to pass an extra parameter from the jQuery.trigger() to the checkbox's click handler. This extra parameter is to notify the click handler that click has been triggered programmatically, rather than by the user directly clicking on the checkbox itself. The checkbox's click handler can then invert the reported check status.

So here's how I'd trigger the click event on a checkbox with the ID "myCheckBox". Note that I'm also passing an object parameter with an single member, nonUI, which is set to true:

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

And here's how I handle that in the checkbox's click event handler. The handler function checks for the presence of the nonUI object as its second parameter. (The first parameter is always the event itself.) If the parameter is present and set to true then I invert the reported .checked status. If no such parameter is passed in - which there won't be if the user simply clicked on the checkbox in the UI - then I report the actual .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've tested with Chrome, Firefox and IE 8.

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

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

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


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

Most fastest and easy way:

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

$el[0].checked;

$el - is jquery element of selection.

Enjoy!

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


});

<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");
}
});

As of June 2016 (using jquery 2.1.4) none of the other suggested solutions work. 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');
}
});

  $("#checkbox").change(function(e) {


if ($(this).prop('checked')){
console.log('checked');
}
});

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

JSFIDDLE