jQueryを使ってすべてのチェックボックスをチェックする方法

Question

チェックボックスの入力タイプが異なる場合、すべての要素をチェックしようとしていますが、別のソリューションを試しましたが機能しませんでした。これは単純ですが、私のコード：

<ul class="items"> 
    <li class="item checkall"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkAll"> 
     <span></span> 
     <p>Check All Items</p> 
    </label> 
    </li> 
    <li class="item"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkbox" value="1"> 
     <span></span> 
     <p>Learn HTML5.1</p> 
    </label> 
    </li> 
    <li class="item"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkbox" value="2"> 
     <span></span> 
     <p>Learn PHP7</p> 
    </label> 
    </li> 
    <li class="item"> 
    <label> 
     <input type="checkbox" name="item[]" id="checkbox" value="4"> 
     <span></span> 
     <p>Program a Website</p> 
    </label> 
    </li> 
</ul> 

のjQuery：

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

Answer 1

idHTMLページ内の各要素については、一意である必要があります。だからunique idを保つか、idとclassの代わりにcheckboxの代わりにclassを指定してください。 classで維持する独自性はありません。

は、ここでは代わりのidクラスに変更されている.checkAllcheckboxにclick/change eventに取り付けて、.checkAllチェックボックスのcheckedプロパティに基づいて、すべての.checkboxプロパティを設定します。以下はスニペットです。

$(".checkAll").on('change',function(){ 
 
    $(".checkbox").prop('checked',$(this).is(":checked")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="items"> 
 
    <li class="item checkall"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkAll"> 
 
     <span></span> 
 
     <p>Check All Items</p> 
 
    </label> 
 
    </li> 
 
    <li class="item"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkbox" value="1"> 
 
     <span></span> 
 
     <p>Learn HTML5.1</p> 
 
    </label> 
 
    </li> 
 
    <li class="item"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkbox" value="2"> 
 
     <span></span> 
 
     <p>Learn PHP7</p> 
 
    </label> 
 
    </li> 
 
    <li class="item"> 
 
    <label> 
 
     <input type="checkbox" name="item[]" class="checkbox" value="4"> 
 
     <span></span> 
 
     <p>Program a Website</p> 
 
    </label> 
 
    </li> 
 
</ul>

これに

Answer 2

変更あなたのJSを：ここで

<input class="checkall" type="checkbox" name="item[]" id="checkAll"> 

がfiddle

です：

$(".checkall").click(function (e) { 
    $('input[type="checkbox"]').not(this).prop('checked', this.checked); 
}); 

そして、あなたの入力にクラスを追加していない要素liへ

Answer 3

$(".checkall").click(function (e) { 

    var list = $(e.target).parents('ul'); 
    $('li:gt(0) label input:checkbox',list).attr('checked', this.checked); 

});