Q&A
現象が確認できません。それだけで現象を再現できるコードを貼ってください。
階層リストのチェックボックスを作っています
子供を押すと、親が押されるようにしたいのですが・・・
21/04/12
仕様を追記
・親に属している子（孫）のなかで、一つでもチェックボックスがあれば、その親全部にさかのぼってチェックが入る
・チェックボックスの状態は、子孫には繁栄しない
■朝ごはん ■味噌汁 ■わかめ □昼ごはん □ラーメン □わかめ □夜ごはん □スープ □わかめ
#質問事項
JqueryのParentをさかのぼって、チェックボックスを辿るには、どうしたらいいでしょうか？
下記のようにテストしてみると、わかめの親が、いつまでたっても味噌汁のままで変わらないのですが、
（どこかで朝ごはんに、たどり着くと思っていました）
$(this).parent().parent().find('label').html() "わかめ" $(this).parent().parent().parent().find('label').html() "味噌汁" $(this).parent().parent().parent().parent().parent().parent().parent().find('label').html() "味噌汁"
#ソース
21/04/12 書き換えを致しました。
https://jsfiddle.net/motochan/sqwL7xft/
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>label with check box test</title> 6 <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" 7 integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="crossorigin="anonymous"></script> 8 </head> 9 10 <body> 11 <ul> 12 <li><input type="checkbox"><label>献立</label> 13 <ul> 14 <li><input type="checkbox"><label>朝ごはん</label> 15 <ul> 16 <li><input type="checkbox"><label>味噌汁</label> 17 <ul> 18 <li><input type="checkbox"><label>わかめ</label></li> 19 </ul> 20 </li> 21 </ul> 22 </li> 23 <li><input type="checkbox"><label>昼ごはん</label> 24 <ul> 25 <li><input type="checkbox"><label>ラーメン</label> 26 <ul> 27 <li><input type="checkbox"><label>わかめ</label></li> 28 </ul> 29 </li> 30 </ul> 31 </li> 32 <li><input type="checkbox"><label>夜ごはん</label> 33 <ul> 34 <li><input type="checkbox"><label>スープ</label> 35 <ul> 36 <li><input type="checkbox"><label>わかめ</label></li> 37 </ul> 38 </li> 39 </ul> 40 </li> 41 </ul> 42 </li> 43 </ul> 44 </body> 45</html> 46
回答2件
0
自己解決
hatena19さんのコードを若干変更して、所望の実装ができました。
prevというのは、DOMの真横の要素なんですね。
今回は親<UL>→直前の<LABEL>→直前の<INPUT>と後ろからさかのぼりました。
$("li input").on('click', function() { if ($(this).prop('checked')== true){ $(this).parents('ul').each(function(index) { $(this).prev().prev().prop('checked', true); }); } });
投稿2021/04/12 04:21
総合スコア90
0
まず、回答の前に、HTML構造が文法違反です。
<ul>内に<ul>は置けません。（下記参照）html
1 <ul> 2 <li><input type="checkbox"><label>献立</label></li> 3 <ul> /* ←ここが文法違反 */ 4 5 /* 略 */ 6 7 </ul> 8 </ul>
許可されている内容 0個以上の <li>, <script>, <template> 要素。
下記のように <li> の中に入れるようにしてください。（下の階層も同様に）
html
1 <ul> 2 <li> 3 <input type="checkbox"><label>献立</label></li> 4 <ul> 5 6 /* 略 */ 7 8 </ul> 9 </li> 10 </ul>
HTMLを上記をもとにまずは修正しましょう。
あと、仕様が曖昧です。下記のような仕様だと勝手に解釈しました。
階層構造のチェックボックスにおいて、
親と子のチェック状況が常に対応しているようにする。
例えば、
子要素をチェックすることによって、グループ内のチェックボックスがすべてチェック状態なら、親にもチェックをいれる。子要素のチェックを外すと親要素のチェックも外れる。
親要素にチェックを入れると、その子要素にチェックが入る。
親要素にチェックを外すと、その子要素のチェックが外れる。
上記の動作は子孫要素、祖先要素にも反映される。
js
1$("li input").on('click', function() { 2 //子孫に反映 3 $(this).closest('li').find("input").prop('checked', $(this).prop('checked')); 4 //祖先に反映 5 $(this).parents('ul').each(function(index) { 6 let cul = $(this); 7 let nck = cul.find('input:not(:checked)'); 8 cul.prev().children().prop('checked', nck.length == 0); 9 }); 10});
追記された仕様に対応するコードです。
js
1$("li input").on('click', function() { 2 if ($(this).prop('checked')== true){ 3 $(this).parents('ul').each(function(index) { 4 $(this).prev().children().prop('checked', true); 5 }); 6 }; 7});
※修正しました。4/12 12：05
投稿2021/04/10 06:31
編集2021/04/12 03:05
総合スコア33790
codeを見させていただきました。
仕様を追加しましたが、要素をＯＮ選択したときに、親全部のチェックボックスがＯＮになる仕様です。
子供をＯＦＦにしても、親には伝搬せず、親のＯＦＦは手動になります。
子孫には何も伝搬はしません。
私のサンプルを少し改造すれば可能だと思いますよ。（よりシンプルなコードになります。）
ただ、その仕様は個人的には違和感があります。
子が選択されていないのに、親だけ選択されている状態は、矛盾しているように思います。
ありがとうございましす。今後の参考に教えていただきたいと思うのですが、
今回のコードに合わせて、自分で事前に検討していた下記のコードを、ご添削いただけませんでしょうか。何か私が、根本的なことを間違えているか、知らない知識がありますでしょうか？
```html
$(':checkbox').change(function(){
$(this).forEach(function (){
if ($(this).prop('checked')== true){
$(this).parent().children('input:first').prop('checked',true);
}
})
});
```
あなたの回答
tips
プレビュー
