檢查所有復選框jquery

Question

為什么在我的js代碼中只需點擊一下name:check_all檢查所有復選框？

HTML：

<div id="ss">
    <input type="checkbox" name="check_all">
</div>
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">

jQuery的：

$(document).on('click change','input[name="check_all"]',function() {
    var checkboxes = $('.idRow');
    if($(this).is(':checked')) {
        checkboxes.attr("checked" , true);
    } else {
        checkboxes.attr ( "checked" , false );
    }
});

演示： http ： //jsfiddle.net/KdaZr/

我的jQuery版本是1.9。

怎么解決它？

Answer 1

使用prop方法。 當您的標記呈現時，屬性將成為元素的屬性，使用JavaScript您應該修改元素的屬性。

$(document).on('change','input[name="check_all"]',function() {
    $('.idRow').prop("checked" , this.checked);
});

http://jsfiddle.net/GW64e/

請注意，如果未動態生成input[name="check_all"] ，則無需委派事件。

Answer 2

使用.prop而不是.attr來更改元素的屬性。 .attr用於HTML屬性。

http://jsfiddle.net/KdaZr/1/

Answer 3

修復如下： -

$(document).on('click change','input[name="check_all"]',function() {
    var checkboxes = $('.idRow');
    if($(this).is(':checked')) {
        checkboxes.each(function(){
            this.checked = true;
        });
    } else {
        checkboxes.each(function(){
            this.checked = false;
        });
    }
});

Answer 4

一個完整的解決方案選擇|| 取消選中復選框jQuery：

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

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

希望這對某人有幫助，就像它對我一樣。