すべてのチェックボックスをチェックする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); 
    } 
}); 

DEMO：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

要素のプロパティを変更するには、.attrではなく、.propを使用します。 .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

完全なソリューションを選択||

$(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は次のようになります：チェックボックスjQueryの選択を解除するにチェック3つのチェックボックスに

シングルチェックボックスが選択可能と解除します。

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

これは私の場合と同じように誰かに役立ちます。