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

jQuery: Test if checkbox is NOT checked

提问by user1040259

I'm having trouble figuring this out. I have two checkboxes (in the future will have more):

我很难弄清楚这一点。我有两个复选框（将来会有更多）：

• checkSurfaceEnvironment-1
• checkSurfaceEnvironment-2

• checkSurfaceEnvironment-1
• checkSurfaceEnvironment-2

Basically, I want to write an if statement and test if one of them is checked and another is NOT checked. What's the easiest way to accomplish the following:

基本上，我想编写一个 if 语句并测试是否检查了其中一个而另一个未检查。完成以下任务的最简单方法是什么：

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

回答by Pablo Mescher

One reliable way I use is:

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

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

If you want to iterate over checked elements use the parent element

如果要遍历已检查的元素，请使用父元素

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

More info:

更多信息：

This works well because all checkboxes have a property checked which stores the actual state of the checkbox. If you wish you can inspect the page and try to check and uncheck a checkbox, and you will notice the attribute "checked" (if present) will remain the same. This attribute only represents the initial stateof the checkbox, and not the currentstate. The current state is stored in the property checked of the dom element for that checkbox.

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

See Properties and Attributes in HTML

请参阅HTML 中的属性和属性

回答by shweta

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

回答by Aneesh Vijendran

You can also use either jQuery .not()method or :not()selector:

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

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

JSFiddle Example

JSFiddle 示例

---

---

Additional Notes

补充说明

From the jQuery API documentation for the :not()selector:

来自:not()选择器的 jQuery API 文档：

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

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

回答by Trufa

An alternative way:

另一种方式：

Here is a working exampleand here is the code, you should also use prop.

这是一个工作示例，这是代码，您还应该使用 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");
    }
});?

I commented out the way to toggle the checked attribute.

我注释掉了切换checked属性的方式。

回答by Zoltan Toth

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

回答by MsGirlPerl

I was looking for a more direct implementation like avijendr suggested.

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

I had a little trouble with his/her syntax, but I got this to work:

我对他/她的语法有点问题，但我得到了这个：

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

In my case, I had a table with a class user-forms, and I was checking if any of the checkboxes that had the string checkPrintin their idwere unchecked.

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

回答by Michael Stachura

I think the easiest way (with jQuery) to check if checkbox is checked or NOT is:

我认为（使用 jQuery）检查复选框是否被选中的最简单方法是：

if 'checked':

如果“检查”：

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

if NOT 'checked':

如果没有“检查”：

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

回答by Ashok

Here I have a snippet for this question.

在这里，我有一个关于这个问题的片段。

$(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>

回答by ayyp

To do it with .attr()like you have, to see if it's checked it would be .attr("checked", "checked"), and if it isn't it would be .attr("checked") == undefined

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

回答by Martin Da Rosa

Return true if all checbox are checked in a div

如果在 div 中选中所有复选框，则返回 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;
}