前提
Javascript初心者です。
Javascriptで、チェックボックスのチェックできる数を制限しています。
実現したいこと
質問事項が複数ある中で、各質問項目ごとにチェック数の制限をしたいです。
例:
質問1で、チェックを3つまで
質問2でも、チェックを3つまで
発生している問題・エラーメッセージ
全てのチェックボックスの中で3つまでとなってしまい、「各質問ごとに」という制限をする方法がわかりません。
foreachや、for文などで質問項目ごとに対して、要素の取得する時どのような考え方でコードを書いたら良いかいまいちわかりません。
どうか、アドバイス最適な実装方法をご教示いただけますと幸いです。
何卒よろしくお願いいたします。
該当のソースコード
【HTML】
<div class="q-block"> <div class="title">質問1(3つまで選択できます。)</div> <div class="checkbox-group js-check-limited"> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢1</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢2</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢3</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢4</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢5</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢6</span> </label> </span> </div> </div> </div> <div class="q-block"> <div class="title">質問2(3つまで選択できます。)</div> <div class="checkbox-group js-check-limited"> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢6</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢7</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢8</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢9</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢10</span> </label> </span> </div> <div class="checkbox-group__item"> <span class="checkbox-field"> <label> <input type="checkbox" name="test" class="js-check-item"> <span>選択肢11</span> </label> </span> </div> </div> </div>
【javascript】
const checkMax = 3; const checkBoxes = document.querySelectorAll('.js-check-item'); function checkCount(target) { let checkCount = 0; checkBoxes.forEach(checkBox => { if (checkBox.checked) { checkCount++; } }); if (checkCount > checkMax) { alert('最大3つまで'); target.checked = false; } } checkBoxes.forEach(checkBox => { checkBox.addEventListener('change', () => { checkCount(checkBox); }) });

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/01/30 04:33
2023/01/30 05:09
2023/01/30 05:27 編集
2023/01/30 05:56