jQueryは同じ要素内のすべてを選択/選択解除します

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

ちょうどクラスチェックであなたのdivを使用します。

$("#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>