jQuery:测试是否未选中复选框


110

我很难弄清楚这一点。我有两个复选框(将来会有更多复选框):

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

基本上,我想编写一条if语句并测试是否检查了其中一个,而未检查另一个。完成以下操作的最简单方法是:

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}

3
使用||&&检查或者检查。&&检查是否选中。
j08691 2012年

Answers:


213

我使用的一种可靠方法是:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

如果要遍历选中的元素,请使用父元素

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

更多信息:

这很好用,因为所有复选框都有一个选中的属性,用于存储复选框的实际状态。如果希望,您可以检查页面并尝试选中和取消选中复选框,那么您会注意到属性“ checked”(如果存在)将保持不变。此属性仅代表复选框的初始状态,而不代表当前状态。当前状态存储在该复选框的dom元素选中的属性中。

请参见HTML中的属性和属性


2
嗯...这就是背景checked = true
Naftali又名Neal 2012年

@Pablo-在下面检查我的答案,这也是一个可靠/适当的选择。
Aneesh Vijendran 2013年

@PabloMescher嘿,能帮我吗?我实际上想确定在多个复选框中选中了哪个复选框?并且,启用/禁用它旁边的文本框。任何帮助将不胜感激。
1lastBr3ath 2014年

@ 1lastBr3ath当然,如果您使用的是jQuery,则只需为文本框找到一个相对于复选框的选择器,然后使用第二个示例即可。看起来像if($(this).prop('checked')){$(this).find(“ <textboxSelector>”)。attr(“ disabled”,true); }
Pablo Mescher 2014年

1
在这种情况下,@ Stophface此属性将始终为布尔值,因为它是计算属性而不是字符串,因此您可以使用==逃脱。明智的做法是始终使用===,尽管并非总是如此
Pablo Mescher

77
if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}

31

您也可以使用jQuery .not()方法或:not()选择器:

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

JSFiddle示例


补充笔记

从jQuery API文档中:not() 选择器

与将复杂的选择器或变量推入:not()选择器过滤器相比,.not() 方法最终将为您提供更具可读性的选择。在大多数情况下,这是一个更好的选择。


1
!$(“#checkSurfaceEnvironment”)。is(“:checked”)返回一个布尔值。如果未选中该复选框,则为true。$('#checkSurfaceEnvironment')。not(':checked')返回DOM元素数组。即使选择器不匹配且数组为空,也用'if'进行测试将返回'true'。只有这样,你的回答可能是正确的,如果你测试I $(“#checkSurfaceEnvironment”)不是(“:检查”)的长度,将返回0或1。
蒂博Witzig

22

另一种方法:

这是一个工作示例,这是代码,您还应该使用prop。

$('input[type="checkbox"]').mouseenter(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});​

我注释了切换选中属性的方法。



6

我一直在寻找像avijendr建议的更直接的实现。

我在使用他/她的语法时遇到了一些麻烦,但是我可以使用它:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

就我而言,我有一个表的一类user-forms,而我检查,如果任何有串的复选框checkPrint他们id都听之任之。


5

我认为(使用jQuery)检查复选框是否已选中的最简单方法是:

如果“选中”:

if ($(this).is(':checked')) {
// I'm checked let's do something
}

如果未“选中”:

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}

4

这里有这个问题的摘要。

$(function(){
   $("#buttoncheck").click(function(){
        if($('[type="checkbox"]').is(":checked")){
            $('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
        }else{
            $('.checkboxStatus').html("Sorry! Checkbox is not checked");
         }
         return false;
   })
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
    <br>
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
    <br>
  </p>
  <p>
    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
  </p>
  <p class="checkboxStatus"></p>
</form>


3

.attr()像您一样用它来做,看看它是否被选中.attr("checked", "checked"),如果不是,它将被选中.attr("checked") == undefined


1

如果在div中选中了所有checbox,则返回true

function all_checked (id_div){
 all_checked = true;

 $(id_div+' input[type="checkbox"]').each(function() { 
    all_checked = all_checked && $('this').prop('checked');
 }

 return all_checked;
}

1

简单,易于检查或不受检查的状况

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>

1

试试这个

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

在上述代码中,按ID选择元素,(#checkSurfaceEnvironment-1)然后按过滤器过滤掉其检查状态(:checked)

它将返回选中元素对象的数组。如果数组中存在任何对象,则满足条件。


尽管您的回答可能会有所帮助,但至少应解释原因。照原样,您的答案已传递到“低质量帖子审核”队列中(我正在查看该队列)。建议您编辑答案以添加说明。
克里斯·斯皮茨

1

有两种检查条件的方法。

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
    // Put your code here if checkbox is checked
}

或者你也可以使用这个

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    // Put your code here if checkbox is checked
}

我希望这对您有用。


1

这是给出的最简单的方法

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>


0

我知道已经回答了这个问题,但仍然是这样做的好方法:

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}

0
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}

4
尽管这可以回答作者的问题,但缺少一些解释性的单词和/或指向文档的链接。如果没有原始短语,原始代码片段不是很有帮助。您可能还会发现如何写一个好的答案很有帮助。请修改您的答案- 点评
尼克

-4
$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
        var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
    if (item.is(":checked")==true) {
        //execute your code here
    }

    else if (item.is(":not(:checked)"))
    {
        //execute your code here
    }

});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.