前提・実現したいこと
http://kanahebiz.hatenablog.com/entry/2015/10/08/121404
を参考にした、複数チェックボックスの、全選択、全解除ができるチェックボックスを作っています。やりたいことは上記のURLがわかりやすいと思います。
ただ、例に挙げたURLと違い、そのチェックボックス群が複数ある想定です。
ソースがこちらになります。
html
1<div class="wrap_block_list"> 2 <ul class="block_list"> 3 <li> 4 <h5> 5 <input type="checkbox" name="syurui" class="parent_check" value="全て"> 6 <a href=""> 7 全て 8 </a> 9 </h5> 10 <ul class="child_check_ul"> 11 <li> 12 <input type="checkbox" class="child_check" value="とんこつ"> 13 <a href=""> 14 とんこつ 15 </a> 16 </li> 17 <li> 18 <input type="checkbox" class="child_check" value="味噌"> 19 <a href=""> 20 味噌 21 </a> 22 </li> 23 <li> 24 <input type="checkbox" class="child_check" value="醤油"> 25 <a href=""> 26 醤油 27 </a> 28 </li> 29 <li> 30 <input type="checkbox" class="child_check" value="塩"> 31 <a href=""> 32 塩 33 </a> 34 </li> 35 </ul> 36 </li> 37 </ul> 38</div> 39<br> 40<div class="wrap_block_list"> 41 <ul class="block_list"> 42 <li> 43 <h5> 44 <input type="checkbox" class="parent_check" value="全て"> 45 <a href=""> 46 全て 47 </a> 48 </h5> 49 <ul class="child_check_ul"> 50 <li> 51 <input type="checkbox" class="child_check" value="とんこつ"> 52 <a href=""> 53 とんこつ 54 </a> 55 </li> 56 <li> 57 <input type="checkbox" class="child_check" value="味噌"> 58 <a href=""> 59 味噌 60 </a> 61 </li> 62 <li> 63 <input type="checkbox" class="child_check" value="醤油"> 64 <a href=""> 65 醤油 66 </a> 67 </li> 68 <li> 69 <input type="checkbox" class="child_check" value="塩"> 70 <a href=""> 71 塩 72 </a> 73 </li> 74 </ul> 75 </li> 76 </ul> 77</div> 78<br> 79<div class="wrap_block_list"> 80 <ul class="block_list"> 81 <li> 82 <h5> 83 <input type="checkbox" class="parent_check" value="全て"> 84 <a href=""> 85 全て 86 </a> 87 </h5> 88 <ul class="child_check_ul"> 89 <li> 90 <input type="checkbox" class="child_check" value="とんこつ"> 91 <a href=""> 92 とんこつ 93 </a> 94 </li> 95 <li> 96 <input type="checkbox" class="child_check" value="味噌"> 97 <a href=""> 98 味噌 99 </a> 100 </li> 101 <li> 102 <input type="checkbox" class="child_check" value="醤油"> 103 <a href=""> 104 醤油 105 </a> 106 </li> 107 <li> 108 <input type="checkbox" class="child_check" value="塩"> 109 <a href=""> 110 塩 111 </a> 112 </li> 113 </ul> 114 </li> 115 </ul> 116</div>
javascript
1$(function() { 2 $('.parent_check').on('click', function () { 3 $(this).parent("h5").next(".child_check_ul").find('.child_check').prop('checked', this.checked); 4 }); 5 6 $('.child_check').on('click', function () { 7 if ($('.child_check_ul :checked').length == $('.child_check_ul :input').length) { 8 $(this).parents(".child_check_ul").prev("h5").find('.parent_check').prop('checked', 'checked'); 9 } else { 10 $(this).parents(".child_check_ul").prev("h5").find('.parent_check').prop('checked', false); 11 } 12 }); 13});
質問したいのが、この上記のjsの
javascript
1$(this).parent("h5").next(".child_check_ul").find('.child_check').prop('checked', this.checked);
javascript
1 $(this).parents(".child_check_ul").prev("h5").find('.parent_check').prop('checked', false);
の部分になります。
例のURLとは違い複数個あるため、$(this)を使って指定をしないと、.parent_check
を押した時に、どの.child_check
も反応してしまうため、このように記述しました。
しかしこの書き方で2点問題が出てきました。
①例えば、「全て」のチェックをおした後に「とんこつ」のチェックを外し、更に「とんこつ」を押したら、本当は「全て」にチェックが入って欲しいのに「全て」にチェックが入りません。
②parent,next,findと、指定の方法が長すぎてもっと綺麗に書けるのではと考えています。
いろいろ検索しましたがわからなかったため、この2点についてお聞きしたいです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。