jQuery、复选框和 .is(":checked")

Question

当我将函数绑定到复选框元素时，例如：

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

复选框在触发事件之前更改其选中属性，这是正常行为，并给出相反的结果。

但是，当我这样做时：

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

触发事件之后，复选框会更改其选中属性。

我的问题是，有没有办法像普通点击一样从 jQuery 触发点击事件（第一种情况）？

PS：我已经尝试过 trigger('click');

Answer 1

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

注意：在旧版本的 jquery 中，使用 attr 是可以的。 现在建议使用prop来读取状态。

Answer 2

有一个适用于 jQuery 1.3.2 和 1.4.2：

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

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

但我同意，与本机事件相比，这种行为似乎有问题。

Answer 3

截至 2016 年 6 月（使用 jquery 2.1.4），其他建议的解决方案都不起作用。检查 attr('checked') 始终返回 undefined，而 is('checked) 始终返回 false。

只需使用 prop 方法：

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

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

Answer 4

我在 jQuery 1.7.2 中仍然遇到这种情况。一个简单的解决方法是使用 setTimeout 推迟点击处理程序的执行，并让浏览器同时发挥其魔力：

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

Answer 5

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

JSFIDDLE

Answer 6

如果您预计会出现这种相当不受欢迎的行为，那么解决此问题的一种方法是将一个额外的参数从 jQuery.trigger() 传递到复选框的单击处理程序。这个额外的参数是为了通知单击处理程序单击是通过编程方式触发的，而不是由用户直接单击复选框本身触发的。然后，复选框的单击处理程序可以反转报告的检查状态。

下面是我如何触发 ID 为“myCheckBox”的复选框上的单击事件。请注意，我还传递了一个带有单个成员 nonUI 的对象参数，该参数设置为 true：

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

以下是我在复选框的单击事件处理程序中处理该参数的方法。处理程序函数检查是否存在非 UI 对象作为其第二个参数。 （第一个参数始终是事件本身。）如果该参数存在并设置为 true，则我会反转报告的 .checked 状态。如果没有传入这样的参数（如果用户只是单击 UI 中的复选框，则不会有这样的参数），那么我会报告实际的 .checked 状态：

$("#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 版本位于 http://jsfiddle.net/BrownieBoy/h5mDZ/

我已经使用 Chrome、Firefox 和 IE 8 进行了测试。

Answer 7

<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 8

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

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

Answer 9

嗯，为了匹配第一个场景，这是我想出的东西。

http://jsbin.com/uwupa/edit

本质上，不是绑定“click”事件，您将“更改”事件与警报绑定。

然后，当您触发事件时，首先触发点击，然后触发更改。

Answer 10

除了 Nick Craver 的回答之外，为了在 IE 8 上正常工作，您需要向复选框添加一个额外的点击处理程序：

// 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');

否则只有当复选框失去焦点时才会触发回调，如 IE 8 在单击复选框和单选框时将焦点保持在它们上。

_{尚未在 IE 9 上进行测试。}

Answer 11

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

});

Answer 12

最快速、最简单的方法：

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

---

$el[0].checked;

$el - 是 jquery 的选择元素。

享受！

Answer 13

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

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