如何檢查所有複選框使用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

id在一個HTML頁面的每個元素必須是唯一的。所以要麼保持unique id要麼提供class代替checkbox代替id和class可以相同。沒有與class保持唯一性。

附上click/change event到.checkAllcheckbox已改爲類在這裏，而不是id並設置基於.checkAll複選框的選中屬性的所有.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這樣的：

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

並添加類到您的輸入不li元素：

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

這裏是fiddle

Answer 3

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

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

});