jQuery select/unselect all，但只在同一個元素內

Question

我有代碼工作，但是當我添加另一個ul時，它會選中所有的複選框。

$('#checkall').click(
function(){ 
    $(this).closest('ul').find(':checkbox').attr('checked', this.checked); 
    $(this).closest('ul').find('span').toggleClass('checked', this.checked) 
}) 

<div class="checks"> 
<ul> 
    <li><label for="checkall"><div class="checker"><span class=""><input type="checkbox" id="checkall" name="about"></span></div><strong>About our program</strong></label></li> 
    <li><label for="about1"><div class="checker"><span><input type="checkbox" id="about1" name="about"></span></div>CEO Message</label></li> 
</ul> 
</div> 

Answer 1

只要用你的分度類檢查：

$("#checkall").click(function() { 
    $(this).closest("div.checks").find(":checkbox").attr("checked", this.checked); 
    $(this).closest("div.checks").toggleClass("checked", this.checked); 
}); 

更新

既然你想多checkall輸入的，你想要使用一個類而不是一個id。因此，使#checkall => input.checkall，它應該工作。

見我的小提琴：http://jsfiddle.net/c4urself/jvPR3/

Answer 2

你可以使用：

$('#checkall').click(
function(){ 
    $(this).find(':checkbox').attr('checked', this.checked); 
    $(this).find('span').toggleClass('checked', this.checked) 
}) 

<div class="checks"> 
<ul> 
    <li><label for="checkall"><div class="checker"><span class=""><input type="checkbox" id="checkall" name="about"></span></div><strong>About our program</strong></label></li> 
    <li><label for="about1"><div class="checker"><span><input type="checkbox" id="about1" name="about"></span></div>CEO Message</label></li> 
</ul> 
</div>