前提・実現したいこと
こちらのサイトを参考に、複数のチェックボックス全てにチェックを入れたり外したりということを実現させようと思っています。
下記のソースコードで基本的には上手くいくのですが、jQyeryの3系を読み込むと、チェックボックスのチェックを1つでも外すと親のチェックボックスが外れると言う動作ができなくなります(参考サイトで使っているjQyeryの1系だと問題なく動きます)。
.prop('checked', false)を利用しなければいけないと言うことまではわかったのですが、参考サイトと同じ動作を実行するには、どこをどう変えたらいいのでしょうか。
どなたか教えてくださいませ。
よろしくお願いいたします。
該当のソースコード
HTML
1<ul> 2 <li><input type="checkbox"><label>check 1</label> 3 <ul> 4 <li><input type="checkbox"><label>check 11</label></li> 5 <li><input type="checkbox"><label>check 12</label></li> 6 <li><input type="checkbox"><label>check 13</label> 7 <ul> 8 <li><input type="checkbox"><label>check 131</label></li> 9 <li><input type="checkbox"><label>check 132</label></li> 10 <li><input type="checkbox"><label>check 133</label></li> 11 </ul> 12 </li> 13 </ul> 14 </li> 15</ul>
jQuery
1$(function() { 2 $("ul input:checkbox").change(function(){ 3 if ($(this).is(':checked')) { 4 $(this).parent().find("input:checkbox").attr('checked', 'checked'); 5 } 6 else { 7 8 $(this).parent().find("input:checkbox").removeAttr('checked'); 9 $(this).parents('li').each(function(){ 10 $(this).children('input:checkbox').removeAttr('checked'); 11 }); 12 } 13 }); 14});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/12 22:25