如何检查单击时是否选中了复选框？答案

【问题标题】：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/

【问题讨论】：

标签： javascript jquery

【解决方案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：

【讨论】：

啊，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 感到困惑。您的代码没有错误，您只需在警报中将unchecked 和checked 相互切换，如下所示：

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

【讨论】：