jQuery 如何使用jQuery检查所有复选框？

How to check all checkboxes using jQuery?

提问by Ivan

I am not expert with jQuery but I have tried to create a little script for my application. I want to check all checkboxes but it isn't working correctly.

我不是 jQuery 专家，但我尝试为我的应用程序创建一个小脚本。我想检查所有复选框，但它无法正常工作。

First I tried to use attrand after that I tried with propbut I'm doing something wrong.

首先我尝试使用attr，然后我尝试使用prop但我做错了什么。

I tried this first:

我先试过这个：

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

But this didn't work.

但这没有用。

Next: This worked better than above code

下一篇：这比上面的代码效果更好

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

Both examples don't work.

这两个例子都不起作用。

JSFiddle: http://jsfiddle.net/hhZfu/4/

JSFiddle：http: //jsfiddle.net/hhZfu/4/

回答by Arun P Johny

You need to use .prop()to set the checked property

您需要使用.prop()来设置选中的属性

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

Demo: Fiddle

演示：小提琴

回答by Adil

Simply use the checkedproperty of the checkAlland use use prop()instead of attr for checked property

只需使用 的checked属性checkAll并使用prop()而不是 attr 来检查属性

Live Demo

现场演示

 $('#checkAll').click(function () {    
     $('input:checkbox').prop('checked', this.checked);    
 });

Use prop() instead of attr() for properties like checked

使用 prop() 而不是 attr() 用于检查的属性

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method

从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选中或禁用状态，请使用 .prop() 方法

You have same id for checkboxes and its should be unique. You better use some class with the dependent checkboxes so that it does not include the checkboxesyou do not want. As $('input:checkbox')will select all checkboxes on the page. If your page is extended with new checkboxes then they will also get selected/un-selected. Which might not be the intended behaviour.

您的复选框具有相同的 id，并且它应该是唯一的。您最好使用一些具有相关复选框的类，以便它不包含您不想要的复选框。由于 $('input:checkbox')将选择页面上的所有复选框。如果您的页面扩展了新的复选框，那么它们也会被选中/取消选中。这可能不是预期的行为。

Live Demo

现场演示

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});

回答by SSR

A complete solution is here.

一个完整的解决方案在这里。

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

Html should be :

Html 应该是：

Single check box on checked three checkbox will be select and deselect.

选中的三个复选框上的单个复选框将被选中和取消选中。

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

Hope this helps to someone as it did for me.

希望这对某人有帮助，就像对我一样。

JS Fiddle https://jsfiddle.net/52uny55w/

JS小提琴https://jsfiddle.net/52uny55w/

回答by Ankit

I think when user select all checkbox manually then checkall should be checked automatically or user unchecked one of them from all selected checkbox then checkall should be unchecked automically. here is my code..

我认为当用户手动选择所有复选框时，应自动选中 checkall 或用户从所有选定的复选框中取消选中其中一个复选框，然后应自动取消选中 checkall。这是我的代码..

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3

回答by ioaniatr

Why don't you try this (in the 2nd line where 'form#' you need to put the proper selector of your html form):

你为什么不试试这个（在'form#'的第二行，你需要放置你的html表单的正确选择器）：

$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })               
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })               
});

Your html should be like this:

你的 html 应该是这样的：

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

I hope that helps.

我希望这有帮助。

回答by zarpio

HTML:

HTML：

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

jQuery:

jQuery：

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

Demo:FIDDLE

演示：小提琴

回答by Davidson Lima

Simplest way I know:

我知道的最简单的方法：

$('input[type="checkbox"]').prop("checked", true);

$('input[type="checkbox"]').prop("checked", true);

回答by echo

You can run .prop()on the results of a jQuery Selector directly even if it returns more than one result. So:

您可以.prop()直接在 jQuery Selector 的结果上运行，即使它返回多个结果。所以：

$("input[type='checkbox']").prop('checked', true)

$("input[type='checkbox']").prop('checked', true)

回答by Sunny

$('#checkAll').on('change', function(){
    if($(this).attr('checked')){
        $('input[type=checkbox]').attr('checked',true);
    }
    else{
        $('input[type=checkbox]').removeAttr('checked');
    }
});

回答by nass

One checkbox to rule them all

一个复选框来统治他们

For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.

对于仍在寻找通过轻量级插件来控制复选框的人来说，它具有对 UniformJS 和 iCheck 的开箱即用支持，并且在至少一个受控复选框被取消选中时被取消选中（并在所有受控复选框被选中时被选中）当然）我已经创建了一个jQuery checkAll 插件。

Feel free to check the examples on documentation page.

随意检查文档页面上的示例。

---

---

For this question example all you need to do is:

对于这个问题示例，您需要做的就是：

$( "#checkAll" ).checkall({
    target: "input:checkbox"
});

Isn't that clear and simple?

这不是很清楚很简单吗？