Q&A
コードを実行してみたのだけど、
１を押して外した後にもう一度押すと全部にチェックが入らないのは想定内でしょうか？
前提・実現したいこと
以下の＜初期状態＞において、「選択１」～「選択３」いずれかのチェックを外した
場合に、「全て」のチェックが外れるようにしたい。
＜初期状態＞ ☑全て ｜ ☑選択１ ☑選択２ ☑選択３
発生している問題・エラーメッセージ
「選択１」のチェック外しでは「全て」のチェックが外れますが、「選択２」・「選択３」では、「全て」のチェックが外れません。
＜設定１：選択１外し＞ ☐全て ｜ ☐選択１ ☑選択２ ☑選択３
・ ↑ＯＫ
＜設定２：選択２外し＞ ☑全て ｜ ☑選択１ ☐選択２ ☑選択３
・ ↑ＮＧ
＜設定３：選択３外し＞ ☑全て ｜ ☑選択１ ☑選択２ ☐選択３
・ ↑ＮＧ
該当のソースコード
<body> <div class="box"><span> </span> <input type='checkbox' name='rooms' value=0 class='all' checked='checked' />全て ｜ <input type='checkbox' name='rooms' value=1 class='ind' checked='checked' />選択１ <input type='checkbox' name='rooms' value=2 class='ind' checked='checked' />選択２ <input type='checkbox' name='rooms' value=2 class='ind' checked='checked' />選択３ </div> <script> $(function() { $('.all').on('click', function() { $("input[name='rooms']").prop('checked', this.checked); }); $("input[name='rooms']").on('click', function() { if ($('.box: checked').length == $('.box: input').length) { $('.all').prop('checked', true);} else {$('.all').prop('checked', false);} }); }); $(function() { $("input[name='rooms']").change(function() { var prop = $('.ind').prop('checked'); if (!prop) {$('.all').prop('checked', false);} }); }); </script> </body>試したこと
最初、選択肢の<input>タグ内で「id="ind"」、<script>～</script>内で「'#ind'」と記述していました。これが原因と思い、それぞれ「class="ind"」、「'.ind'」と変更してみましたが、改善に至っていません。
補足情報（FW/ツールのバージョンなど）
「選択肢に再チェック」→「全てにチェックが入らない」は、想定内の動きになります。
誰も突っ込まないので突っ込んでおきますが、仮に解決したとしても質問文でのソースコードは
MarkDownの<code>ブロックに貼り付けてください。
第三者が同様の問題にぶつかって本質問を見たときに見づらいので。
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
回答4件
0
ベストアンサー
js
1if ($('.box: checked').length == $('.box: input').length) {
この行のセレクタがおかしいのですが、これを '.box :checked' と '.box input' に修正しても期待どおりの動作ではないかと思います。
- 変更後の値でなにかするときは、
clickではなくchangeを使うべき .allと.indがあるのですから、両方対象になってしまうinput[name='rooms']は使うべきではない
以上を直すと以下のようになります。
js
1$(function() { 2 $('.all').change(function() { 3 $(".ind").prop('checked', this.checked); 4 }); 5 $(".ind").change(function() { 6 $('.all').prop('checked', $('.ind:checked').length == $('.ind').length); 7 }); 8});
投稿2021/03/16 01:44
編集2021/03/16 01:47
総合スコア21679
ご回答の内容で試行致しましたところ、所望の動作を確認できました。 初学者のため苦労しておりますが、
ご協力を頂きながら理解を深めていきます。 誠に有難う御座いました。
0
javascript
1<script> 2$(function(){ 3 $('.all').on('change',function(){ 4 $(this).nextAll('.ind').prop('checked',$(this).prop('checked')); 5 }); 6 $('.ind').on('change',function(){ 7 $(this).prevAll('.all').prop('checked',$(this).closest('div').find('.ind:not(:checked)').length==0); 8 }); 9}); 10</script> 11<div> 12<input type='checkbox' name='rooms' value='0' class='all' checked='checked' />全て ｜ 13<input type='checkbox' name='rooms' value='1' class='ind' checked='checked' />選択１ 14<input type='checkbox' name='rooms' value='2' class='ind' checked='checked' />選択２ 15<input type='checkbox' name='rooms' value='3' class='ind' checked='checked' />選択３ 16</div> 17<div> 18<input type='checkbox' name='rooms' value='0' class='all' checked='checked' />全て ｜ 19<input type='checkbox' name='rooms' value='1' class='ind' checked='checked' />選択１ 20<input type='checkbox' name='rooms' value='2' class='ind' checked='checked' />選択２ 21<input type='checkbox' name='rooms' value='3' class='ind' checked='checked' />選択３ 22</div> 23
投稿2021/03/16 03:01
総合スコア116688
0
以下のコードをchangeした要素であるthisに変えてやると質問の要件は満たせるかなぁ。
javascript
1//var prop = $('.ind').prop('checked'); 2var prop = $(this).prop('checked');
追記
一応、コードを変えたら手元の環境では質問の条件を満たしました。
他に変なところがあるみたいだけども…
投稿2021/03/16 01:35
編集2021/03/16 01:50退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
