全ての子チェックボックスを変更した際に親チェックボックスのチェック状態を変更する方法

Question

下記のようなhtmlを使って、id名「fruits」を親チェックボックス、それ以外を子チェックボックスとして質問をしています。

この場合**「子チェックボックスを全てつけた/外した際に親チェックボックスの状態を変更」**するにはどうすればよいのか教えてほしいです。

htmlの中身は本来のものとは変更させているので、違和感を感じるコードがあるとは思いますが、目をつむってもらえると嬉しいです。

ちなみに、「親チェックボックスのチェックを外すと、全ての子チェックボックスの状態を変更」することは出来ています。

回答よろしくお願いします。

<ul class="sa_list">
　　<li><a href="#" class="fruits"><label for="fluits"><input type="checkbox" id="fluits" >果物</label></a></li>
　　<li><a href="#" class="apple"><label for="apple"><input type="checkbox" id="apple" >りんご</label></a></li>
    <li><a href="#" class="orange"><label for="orange"><input type="checkbox" id="orange">オレンジ</label></a></li>
　　<li><a href="#" class="grape"><label for="grape"><input type="checkbox" id="grape">ぶどう</label></a></li>
</ul>

Comments

[azuapricot]

子チェックボックスがチェックされるイベント取得
↓
.parents(".sa_list") で親ulまでさかのぼる
↓
子要素のチェックボックスを取得して繰り返し処理でチェックされているか判定
↓
全部チェックされてたら親を外せばいいし、全部チェックが外れてたら親を外せばいい

[nankotsu]

質問ばかりで申し訳ありませんが、繰り返し処理の後、どうやって「全てのチェックがされていた/外れていた」が分かるでしょうか？

[azuapricot]

面倒であればフラグ立てればよいのでは？
イベントの起点となった子チェックボックスがチェックされた状態なら、
他のチェックボックスがチェックされているかどうか判定
チェックが通る＝全てチェックされているなら親をチェックする、とか

難しければ紙にでも書いて整理してみると良いかと

Answer 1

親子関係が構造的に設定されていないのでclassなどで調整してください

Comments

[yambejp]

<script>
$(function(){
$('.fruits').on('change',function(){
if($('.fruits:not(:checked)').length==0) $('#fruits').prop('checked',true);
if($('.fruits:checked').length==0) $('#fruits').prop('checked',false);
});
});
</script>
<ul class="sa_list">
<li><a href="#"><label><input type="checkbox" id="fruits" >果物</label></a></li>
<li><a href="#"><label><input type="checkbox" id="apple" class="fruits">りんご</label></a></li>
<li><a href="#"><label><input type="checkbox" id="orange" class="fruits">オレンジ</label></a></li>
<li><a href="#"><label><input type="checkbox" id="grape" class="fruits">ぶどう</label></a></li>
</ul>

Answer 2

チェックボックスの変更イベントで、すべての子ボックスの状態をチェックして、その結果親を変更すればよろしい

Comments

[nankotsu]

回答ありがとうございます。
そういう風にすればいいのは分かってはいるのですが、上手く書くことができません、、、。