複数のチェックボックスをチェックしたい

質問

質問させてください。
複数のチェックボックスを項目別に全てチェックするようなjqueryの書き方をご教授いただきたいです。

<table>
<tr>
<td>
<input type="checkbox" name="" />まとめてチェック
</td>
</tr>
<tr>
<td>
<li><input type="checkbox" name="" value="" />a</li>
<li><input type="checkbox" name="" value="" />b</li>
<li><input type="checkbox" name="" value="" />c</li>
<li><input type="checkbox" name="" value="" />d</li>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" />まとめてチェック
</td>
</tr>
<tr>
<td>
<li><input type="checkbox" name="" value="" />e</li>
<li><input type="checkbox" name="" value="" />f</li>
<li><input type="checkbox" name="" value="" />g</li>
<li><input type="checkbox" name="" value="" />h</li>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" />まとめてチェック
</td>
</tr>
<tr>
<td>
<li><input type="checkbox" name="" value="" />i</li>
<li><input type="checkbox" name="" value="" />j</li>
<li><input type="checkbox" name="" value="" />k</li>
<li><input type="checkbox" name="" value="" />l</li>
</td>
</tr>
</table>

上記のようにそれぞれの項目に「まとめてチェック」のチェックボックスがあり、
そこに該当するチェック項目は全てチェックorチェックを外す

っという挙動の実装を考えています。
jqueryでやりたいのですが、javascript、jqueryがかなり苦手でいまいちいきません。

ググって
$(function(){
$('#all').click(function(){
if(this.checked){
$('#check input').attr('checked','checked');
}else{
$('#check input').removeAttr('checked');
}
});
});
このソースを見つけたのですが、これだと一つの項目でしか実装できず
項目分このjqueryを書くのも余り良い書き方だと思えません。

どなたか、ご教授お願いいたします。

回答No.1

ONEONE · ベストアンサー

まず、li が ul ないし olに囲まれていないのがよくないです。
きちんと記述しないとブラウザによっては崩れますのでね。javascriptも正常に動きません。

jQueryは要素の指定の方法がいろいろあるので、それだけ体得すれば割といけます。

もし、お書きになったようなhtmlの場合なら、
全てチェックのcheckboxにclass="all"を追加して、以下のようなjQueryを書けばよいと思います。
未検証です。

$(function(){
$('.all').click(function(){
//対象のチェックボックスはclassにallを指定したチェックボックスの
//親のtrの次のtr内にあるinput要素
var $target_input = $(this).parents('tr').next().find('input');
if(this.checked){
$target_input.attr('checked','checked');
}else{
$target_input.removeAttr('checked');
}
});
});

お礼

回答いただきありがとうございます！
すみません、急いで作成してしまいulが抜けていました。
メソッドチェーンの概念がまだしっかり分かっておらず非常に参考になりました！
ベストアンサーに選ばせていただきます、このたびはありがとうございました！