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

Posted 2023-03-05

【中文标题】jQuery、复选框和 .is(":checked")

【英文标题】：jQuery, checkboxes and .is(":checked")

【发布时间】：2011-02-09 06:14:15

【问题描述】：

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

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

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

但是，当我这样做时：

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

复选框更改它检查属性后事件被触发。

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

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

【问题讨论】：

我刚刚验证了这一点。你是完全正确的。这确实似乎可能是一个错误。我会用 jQuery 将它作为一个错误提出来，看看会发生什么dev.jquery.com

“改变”事件呢？

@cletus 实际上，这是一个 Jquery 1.4.2 错误。 1.3.2 工作得很好。

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

@Nick 它仍然与普通鼠标单击相反。老实说，我不知道为什么 1.3.2 适合我而 1.4.2 不适合，但仍然需要更改。

【参考方案1】：

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

注意：在旧版本的 jquery 中，可以使用 attr。 Now it's suggested to use prop 读取状态。

【讨论】：

我试过了，"$(#myCheckbox).click()" 取消选中/选中该框，但永远不会触发更改功能。我还尝试更改“checked”属性而不是调用 click()，甚至将“change”函数设置为“live”。

@Ben - 您必须以不同的方式触发它才能使其运行，请参阅我对触发语句的回答。

@Nick 谢谢，我会接受 tcurdt 的回答，因为他是第一个提出解决方案的人。愚蠢的我，我没有触发“改变”方法。

对于较新版本的 jquery，函数是 prop("checked") 而不是 attr("checked") 以防万一抓到其他人。

由于不向后兼容，我会避免使用“prop”，尤其是。在 IE 中。

【参考方案2】：

好吧，为了匹配第一个场景，这是我想出的。

http://jsbin.com/uwupa/edit

本质上，不是绑定“click”事件，而是将“change”事件与警报绑定。

那么，当你触发事件时，先触发点击，再触发变化。

【参考方案3】：

在 jQuery 1.3.2 和 1.4.2 中有一个解决方法：

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

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

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

【参考方案4】：

除了 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 上测试过。}

【参考方案5】：

如果您预料到这种相当不受欢迎的行为，那么解决它的方法是将一个额外的参数从 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 进行了测试。

【参考方案6】：

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

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

【讨论】：

是的！有点离题，但是如果我希望它默认为“活动”，当有人单击“添加新记录”时，我必须在带有复选框的剑道网格中做同样的事情。我还必须给它一个 500 毫秒的时间。然后我必须添加.click()，然后设置.attr('value', 'true')，然后设置.change()，然后.blur()，然后当我以编程方式单击“更新”按钮时，它会以编程方式设置该框......

【参考方案7】：

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


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

【参考方案8】：

最快最简单的方法：

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

---

$el[0].checked;

$el - 是 jquery 的选择元素。

享受吧！

【参考方案9】：

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

);

【讨论】：

请提一些细节

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

【参考方案10】：

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

);

【讨论】：

一些cmets会很好

【参考方案11】：

截至 2016 年 6 月（使用 jquery 2.1.4），其他建议的解决方案均无效。检查attr('checked') 总是返回undefined 和is('checked) 总是返回false。

只需使用 prop 方法即可：

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

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

【讨论】：

is('checked) 将返回 false，因为“checked”不是 CSS 伪选择器。正确的应该是is(':checked')，所以它会寻找“:checked”。

【参考方案12】：

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

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

【参考方案13】：

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

JSFIDDLE