質問: $('.child_check_ul :input').length) { $(this).parents(".child_check_ul").prev("h5").find('.parent_check').prop('checked', 'checked'); } else { $(this).parents(".child_check_ul").prev("h5").find('.parent_check').prop('checked', false); } }); }); ``` 質問したいのが、この上記のjsの ``` $(this).parent("h5").next(".child_check_ul").find('.child_check').prop('checked', this.checked); ``` ``` $(this).parents(".child_check_ul").prev("h5").find('.parent_check').prop('checked', false); ``` の部分になります。 例のURLとは違い複数個あるため、$(this)を使って指定をしないと、`.parent_check`を押した時に、どの`.child_check`も反応してしまうため、このように記述しました。 しかしこの書き方で2点問題が出てきました。 1例えば、「全て」のチェックをおした後に「とんこつ」のチェックを外し、更に「とんこつ」を押したら、本当は「全て」にチェックが入って欲しいのに「全て」にチェックが入りません。 2parent,next,findと、指定の方法が長すぎてもっと綺麗に書けるのではと考えています。 いろいろ検索しましたがわからなかったため、この2点についてお聞きしたいです。
回答: 親の兄弟の孫であればこうでは? ``` $(function(){ $('.parent_check').on('change', function () { $(this).parent().siblings().children().children().prop('checked', $(this).prop('checked')); }); }); ```