Jqueryでつまづき中・・・やや限界に近い

update

TERATAILのお陰で対応できました。　→　https://jsfiddle.net/motochan/sqwL7xft/

ただパタパタの部分は、まだ出来ていませんが・・・

JQUERYセレクタのコツ

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);  
    });
  }
});

階層リストのチェックボックス

いまとあるアプリのチェック付きリストを実装しようとしています。

パタパタと押し開くようなボタンです。

やりたいこと

• 孫から親をさかのぼって、チェックボックスをすべて入れたい

(BEFORE)

□朝ごはん
　　□味噌汁
　　　　□わかめ
□昼ごはん
　　□ラーメン
　　　　■わかめ　　　
□夜ごはん
　　□スープ
　　　　□わかめ

(AFTER)

□朝ごはん
　　□味噌汁
　　　　□わかめ
■昼ごはん
　　■ラーメン
　　　　■わかめ　　
□夜ごはん
　　□スープ
　　　　□わかめ

source

親から子供に行くソースは多々ある。
しかし、逆に下から上っていくものが見つからない

あとラーメンを押したとき、わかめには入らないこと

なかなかうまくいかへんなあ・・・

Script

とりあえず、自分でやりかけてみる・・・
（またしても、誰かにお助けしてもらえないかなと期待する）

追記

わかめの親が、いつまでたっても味噌汁のまま

teratailに投稿　　https://teratail.com/questions/332516?modal=q-comp

$(this).parent().parent().find('label').html()
"わかめ"

$(this).parent().parent().parent().find('label').html()
"味噌汁"

$(this).parent().parent().parent().parent().parent().parent().parent().find('label').html()
"味噌汁"