如何检查单击时是不是选中了复选框?

Posted

技术标签:

【中文标题】如何检查单击时是不是选中了复选框?【英文标题】:How can I check if a checkbox is checked on click?如何检查单击时是否选中了复选框? 【发布时间】:2011-10-16 02:39:53 【问题描述】:

当我单击复选框时,我需要根据复选框是否被选中来触发一些代码。 但由于某种原因,.is(':checked') 总是被触发。

这是我的代码。

  jQuery('#selectlist input[type=checkbox]').live('click',function()
    var select_id = jQuery(this).attr('id');

    if(jQuery(this).is(':checked')) 
      alert('You have unchecked the checkbox');
      // Remove some data from variable
     else 
      alert('You have checked the checkbox');
      //Add data to variable
    
  

更新 我在 JSFiddle 上添加了一个示例:http://jsfiddle.net/HgQUS/

【问题讨论】:

【参考方案1】:

使用change 而不是click

【讨论】:

不管我用change还是click,结果还是一样。在此处查看我的示例> jsfiddle.net/HgQUS @Steven -- 它工作正常,你只是把你的 if 语句倒过来:jsfiddle.net/maniator/HgQUS/4 if(jQuery(this).is(':checked'))怎么会倒退?如果复选框被选中,这不控制吗? 是的,我明白了。我只是不明白if(jQuery(this).is(':checked')) 背后的逻辑。对我来说,这应该检查复选框是否被选中。还是我的逻辑在这里都错了? 好吧,没关系。 @Aleks 说了我的想法,当我点击它时,它 is 设置为选中 :)【参考方案2】:
$(this).val();

$(this).prop('checked'); # on jquery >= 1.6

你会更擅长搜索 SO:

Get checkbox value in jQuery How to retrieve checkboxes values in jQuery Testing if a checkbox is checked with jQuery

【讨论】:

啊,propr 函数。忘了那个。但结果还是一样 :( jsfiddle.net/HgQUS/2 它的作用与它应该做的相反。 检查你的代码,你正在触发相反的动作...... :)【参考方案3】:
this.checked

应该告诉你复选框是否被选中,尽管这只是javascript,所以你不能在'jquery'元素上调用它。比如——

<input type="checkbox" id="checky">
$("#checky")[0].checked

【讨论】:

【参考方案4】:

如果输入有checked属性,那么明显是checked,如果没有checked就去掉。

if ($(this).attr("checked")) 
    // return true

else 
    // return false

但是,您可以调整上面的代码来检查属性(如果它没有被删除而是设置为真/假)是否为以下:

if ($(this).attr("checked") == "true") 
    // return true

else 
    // return false

另外,我看到您使用 jQuery 作为选择器的运算符,您可以只使用美元符号$,因为这是一个快捷方式。

【讨论】:

也试过了,但不起作用:jsfiddle.net/HgQUS/1 出于某种原因,它的行为与它应该做的相反。 那是因为您在 xD 中使用错误 - 您编写的语句检查复选框是否为 changed,因为它设置了 checked 属性,然后运行 ​​if 语句.所以你想要做的只是交换内容。 jsfiddle.net/HgQUS/5。 :3 html规范将checked属性的内容定义为“checked”,而不是“true”:w3.org/TR/html4/interact/forms.html#edef-INPUT @Aleks - 是的。我在想可能是这样,但我不确定。 @GaretJax,我确实说过我写的第一条语句就是为此而写的,但是我见过(主要是与 Internet Explorer 相关的)checked 属性被用作布尔值的案例。【参考方案5】:

我触发了警报,它对我有用:

<script type="text/javascript">
  jQuery('#selectlist input[type=checkbox]').live('click',function()
    var select_id = jQuery(this).attr('id');

    if(jQuery(this).is(':checked')) 
            alert('You have checked the checkbox');
      // Remove some data from variable
     else 
            alert('You have unchecked the checkbox');
      //Add data to variable
    
  );

</script>

【讨论】:

【参考方案6】:

你的“if”语法不正确。

jQuery('#selectlist_categories input[type=checkbox]').live('click',function()
    var cat_id = jQuery(this).attr('id');

    // if the checkbox is not checked then alert "You have unchecked the checkbox"
    if(!jQuery(this).is(':checked')) 
      alert('You have unchecked the checkbox');
     else 
      //else alert "You have checked the checkbox"
      alert('You have checked the checkbox');
    
  );

【讨论】:

【参考方案7】:

如果您对为什么在检查时显示 unchecked 感到困惑。您的代码没有错误,您只需在警报中将uncheckedchecked 相互切换,如下所示:

$('#selectlist_categories input[type=checkbox]').on('change',function()
     var cat_id = $(this).attr('id');
     let cat_idText = $("input[type=checkbox]:checked").val();
    
     if(jQuery(this).is(':checked')) 
       alert('You have checked the checkbox' + " " + `$cat_idText`); 
      else 
       alert('You have unchecked the checkbox'); 
     
); 

PS:我已经更新了脚本以在 jQuery 3.5.1 中工作,原来的 live() 仅适用于 jQuery 1.7,因为它在 中被删除>1.9 改为使用 on() 并且在 jQuery 3.5.1 上你可以使用 $ 而不是 jQuery 并且 val() 函数适用于所有版本,因为它添加了jQuery 1.0

或者以更好的方式将 if 语句更正为 RickyCheers 表示在 jQuery$ 之前添加 !,然后 if 语句会将其变为如果没有选中 jQuery 元素

$('#selectlist_categories input[type=checkbox]').on('click',function()
     var cat_id = $(this).attr('id');
    
     if(!jQuery(this).is(':checked')) 
       alert('You have unchecked the checkbox');
      else 
       alert('You have checked the checkbox');
     
);

【讨论】:

以上是关于如何检查单击时是不是选中了复选框?的主要内容,如果未能解决你的问题,请参考以下文章

在继续之前如何验证复选框是不是被选中?

单击时如何取消选中复选框

在单击 jquery 时添加属性“已检查”

iCheck 检查复选框是不是被选中

如何检查 ListView 项目是不是被选中

jQuery DataTables 检查标题单击时的复选框