关于if语句:jQuery:测试是否未选中复选框

jQuery: Test if checkbox is NOT checked

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

  • checkSurfaceEnvironment-1
  • checkSurfaceEnvironment-2

基本上,我想编写一个if语句,测试其中一个是否被检查,另一个是否被检查。最简单的方法是什么?

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


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

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

如果要对选中的元素进行迭代,请使用父元素

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

更多信息:

这很好地工作,因为所有复选框都选中了一个存储复选框实际状态的属性。如果您希望检查页面并尝试选中和取消选中复选框,您会注意到"选中"(如果存在)属性将保持不变。此属性仅表示复选框的初始状态,而不是当前状态。当前状态存储在该复选框的dom元素的选中属性中。

请参阅HTML中的属性和属性


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


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

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

JSfiddle示例

附加说明

:not()选择器的jquery api文档中:

The .not() method will end up providing you with more readable
selections than pushing complex selectors or variables into a :not()
selector filter. In most cases, it is a better choice.


另一种方法:

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

1
2
3
4
5
6
7
8
9
$('input[type="checkbox"]').mouseenter(function() {
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});?

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


1
if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )

我在寻找一个更直接的实现,就像Avijendr建议的那样。

我对他/她的语法有点问题,但我要做到这一点:

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

在我的例子中,我有一个带有类user-forms的表,我正在检查是否有任何复选框的字符串checkPrint在他们的id中未选中。


这里我有一个问题的片段。

1
2
3
4
5
6
7
8
9
10
11
$(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;
   })
   
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<form>
  <p>

    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
   
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
   
 
</p>
  <p>

    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
 
</p>
  <p class="checkboxStatus">
</p>
</form>


像你这样用.attr()做,看看它是否被检查过,它就是.attr("checked","checked"),如果不是,它就是.attr("checked") == undefined


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

如果"检查":

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

如果没有"选中",则:

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

试试这个

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

在上面的代码中,通过id (#checkSurfaceEnvironment-1)选择元素,然后通过(:checked)过滤器过滤掉它的检查状态。

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


简单容易检查或取消检查的条件

1
2
3
4
5
6
7
8
9
10
11
<input type="checkbox" id="ev-click" name="" value="">


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


有两种方法可以检查状况。

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

或者你也可以用这个

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

我希望这对你有用。


下面是给出的最简单的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <script type="text/javascript">

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

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

                }

            });

        });

如果在一个DIV中检查了所有checBox,则返回true

1
2
3
4
5
6
7
8
9
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
2
3
4
5
$("checkbox selector").click(function() {
    if($(this).prop('checked')==true){
       do what you need!
    }
});

我知道这已经得到了回答,但这仍然是一个很好的方法:

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


1
2
3
4
5
6
7
8
if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{
    alert('checkbox is checked');
}


1
2
3
4
5
6
7
8
9
10
11
12
$("#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
    }

});