jQuery，复选框和.is（“:checked”）

Question

当我将一个函数绑定到复选框元素时：

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

复选框在触发事件之前会改变其checked属性，这是正常行为，并会产生相反的结果。

然而，当我执行以下操作时：

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

复选框在触发事件之后更改其checked属性之后。

我的问题是，是否有一种从jQuery中触发单击事件的方式，就像正常的单击事件一样（第一个场景）？

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

- Ben

---

我刚刚核实了一下，你是完全正确的。那似乎可能是一个错误。我会向jQuery报告这个错误并观察发生了什么 http://dev.jquery.com/ - cletus

“change”事件怎么办？ - ZippyV

@cletus 确实，这是一个 Jquery 1.4.2 的 bug。1.3.2 可以正常工作。 - Ben

我在1.4.2和1.3.2中看到了相同的行为：http://jsfiddle.net/HCUNn/ - Nick Craver

@Nick 它仍然与正常鼠标点击相反。老实说，我不知道为什么1.3.2适用于我而1.4.2不适用，但是这仍然需要改变。 - Ben

Answer 1

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

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

- tcurdt

---

我已经尝试过使用"$ (#myCheckbox).click()"来取消/选中复选框，但是更改函数从未被触发。我还尝试过改变'checked'属性而不是调用click()，甚至将'change'函数设置为'live'。 - Ben

对于更新版本的jQuery，该函数是prop("checked")，而不是attr("checked")。如果有其他人遇到同样的问题，请注意这一点。 - danski

我会避免使用“prop”，因为它在 IE 中不向后兼容。 - vapcguy

这个已经不起作用了。绑定到change事件是正确的，但是attr('checked')无论复选框输入的选中状态如何，都会返回undefined。 - atomless

根据@danski的评论，您需要在较新版本的jQuery中使用prop()。我认为这不是向后兼容性问题，因为您可以在网站上指定要使用的jQuery版本。 - Robb Sadler

Answer 2

有一个解决方法适用于jQuery 1.3.2和1.4.2：

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

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

但是我同意，与本机事件相比，这种行为似乎存在缺陷。

- Nick Craver

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

- atomless

---

is('checked)会返回false，因为"checked"不是CSS伪选择器。正确的应该是is(':checked')，这样它就会查找":checked"。 - dhaupin

Answer 4

我仍然在使用jQuery 1.7.2时遇到此问题。一个简单的解决方法是使用setTimeout延迟执行点击处理程序，同时让浏览器在此期间进行其魔法：

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

- Srđan Stanić

---

是的！有点离题，但当有人点击“添加新记录”时，我必须在Kendo网格中使用复选框做同样的事情，如果我想默认为“Active”。我还必须给它500毫秒的时间。然后我必须添加.click()，然后设置.attr('value', 'true')，然后.change()，然后.blur()，在我以编程方式单击“更新”按钮时才能以编程方式设置框。 - vapcguy

Answer 5

如果您预料到这种不太想要的行为，那么解决方法之一是从jQuery.trigger()传递一个额外的参数到复选框的点击处理程序。这个额外的参数是用来通知点击处理程序，该点击是通过编程方式触发的，而不是用户直接点击复选框本身。复选框的点击处理程序可以反转报告的选中状态。

以下是如何在ID为“myCheckBox”的复选框上触发单击事件的方法。请注意，我还传递了一个对象参数，其中包含一个成员nonUI，它设置为true：

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

以下是我在复选框的点击事件处理程序中处理它的方式。处理程序函数检查第二个参数中是否存在nonUI对象。（第一个参数始终是事件本身。）如果该参数存在且设置为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上进行了测试。

- ChillyPenguin

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

- Tejas Soni

---

一些注释会很好。 - Danil Gaponov

Answer 7

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

JSFIDDLE

- Surya R Praveen

Answer 8

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

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

- Superman

Answer 9

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

});

- user3607804

---

请提供一些细节。 - CodeWarrior

似乎这只是一个重复的答案，使用change而不是OP的click，并且只是使用if语句作为测试:checked的不同方式。 - vapcguy

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上进行测试。

- Yuri Ghensev