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>