Jquery复选框检查所有

Question

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

首先我尝试使用attr,之后我尝试了,prop但我做错了.

我先试了一下:

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

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

但这没效果.

下一步:这比上面的代码效果更好

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

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

这两个例子都不起作用.我试着谷歌搜索答案,但没有成功.

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

谢谢

Answer 1

您需要使用.prop()来设置checked属性

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

演示:小提琴

Answer 2

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

现场演示

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

对于像checked这样的属性,使用prop()而不是attr()

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

复选框具有相同的ID,它应该是唯一的.最好使用带有从属复选框的某个类,这样它就不包含您不想要的复选框.由于 $('input:checkbox')将选择页面上的所有复选框.如果您的页面使用新的复选框进行了扩展,那么它们也会被选中/取消选中.这可能不是预期的行为.

现场演示

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

Answer 3

这里有完整的解决方案.

$(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应该是:

选中并取消选中已选中三个复选框上的复选框.

<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" />

希望这对某人有帮助,就像它对我一样.

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

Answer 4

我认为当用户手动选择所有复选框时，应自动选中 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

Answer 5

你为什么不尝试这个(在'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);
   })               
});

你的HTML应该是这样的:

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

我希望有所帮助.

Answer 6

我知道的最简单的方法：

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

Answer 7

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的:

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

演示: FIDDLE