グループ化された複数チェックボックスの必須確認

Question

前提・実現したいこと

複数のグループ化されたのチェックボックスがあり、それぞれのグループで最低1つのチェックが必須とし、
各グループで最低１つチェックされたら送信ボタンが押せる様にしたいです。
グループ化されたチェックボックスが1組の場合は問題なく動きましたが、複数グループで必須チェックを行うにはどうしたら良いでしょうか？
また、難しい場合はそのようなチェックを行なってくれるライブラリ等ありますでしょうか？

該当のソースコード

<div class="checkbox">
  <label for="checkbox01"><input type="checkbox" id="checkbox01" name="qa1" class="check1"><span class="check_text">チェックボックス1</span></label>
  <label for="checkbox02"><input type="checkbox" id="checkbox02" name="qa1" class="check1"><span class="check_text">チェックボックス2</span></label>
  <label for="checkbox03"><input type="checkbox" id="checkbox03" name="qa1" class="check1"><span class="check_text">チェックボックス3</span></label>
  <label for="checkbox04"><input type="checkbox" id="checkbox04" name="qa1" class="check1"><span class="check_text">チェックボックス4</span></label>
</div>

<div class="checkbox">
  <label for="checkbox05"><input type="checkbox" id="checkbox05" name="qa2" class="check2"><span class="check_text">チェックボックス5</span></label>
  <label for="checkbox06"><input type="checkbox" id="checkbox06" name="qa2" class="check2"><span class="check_text">チェックボックス6</span></label>
  <label for="checkbox07"><input type="checkbox" id="checkbox07" name="qa2" class="check2"><span class="check_text">チェックボックス7</span></label>
  <label for="checkbox08"><input type="checkbox" id="checkbox08" name="qa2" class="check2"><span class="check_text">チェックボックス8</span></label>
</div>

<div class="checkbox">
  <label for="checkbox09"><input type="checkbox" id="checkbox09" name="qa3" class="check3"><span class="check_text">チェックボックス9</span></label>
  <label for="checkbox10"><input type="checkbox" id="checkbox10" name="qa3" class="check3"><span class="check_text">チェックボックス10</span></label>
  <label for="checkbox11"><input type="checkbox" id="checkbox11" name="qa3" class="check3"><span class="check_text">チェックボックス11</span></label>
  <label for="checkbox12"><input type="checkbox" id="checkbox12" name="qa3" class="check3"><span class="check_text">チェックボックス12</span></label>
</div>
 
<input type="submit" value="内容を確認する" onClick="return isCheck()">

function isCheck() {
    var arr_checkBoxes = document.getElementsByClassName("check");
    var count = 0;
    for (var i = 0; i < arr_checkBoxes.length; i++) {
        if (arr_checkBoxes[i].checked) {
            count++;
        }
    }
    if (count > 0) {
        return true;
    } else {
        window.alert("1つ以上選択してください。");
        return false;
    };
 
}

Answer 1

<script>
document.addEventListener('change',e=>{
  if(e.target.type=="checkbox" && e.target.closest('.checkbox')){
    const flg=[...document.querySelectorAll('.checkbox')].map(x=>!!x.querySelector(':checked')).includes(false);
    document.querySelector('#sbmt').disabled=flg;
  }
});
</script>
<div class="checkbox">
  <label><input type="checkbox" name="qa1"><span class="check_text">チェックボックス1</span></label>
  <label><input type="checkbox" name="qa1"><span class="check_text">チェックボックス2</span></label>
  <label><input type="checkbox" name="qa1"><span class="check_text">チェックボックス3</span></label>
  <label><input type="checkbox" name="qa1"><span class="check_text">チェックボックス4</span></label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="qa2"><span class="check_text">チェックボックス5</span></label>
  <label><input type="checkbox" name="qa2"><span class="check_text">チェックボックス6</span></label>
  <label><input type="checkbox" name="qa2"><span class="check_text">チェックボックス7</span></label>
  <label><input type="checkbox" name="qa2"><span class="check_text">チェックボックス8</span></label>
</div>
<div class="checkbox">
  <label><input type="checkbox" name="qa3"><span class="check_text">チェックボックス9</span></label>
  <label><input type="checkbox" name="qa3"><span class="check_text">チェックボックス10</span></label>
  <label><input type="checkbox" name="qa3"><span class="check_text">チェックボックス11</span></label>
  <label><input type="checkbox" name="qa3"><span class="check_text">チェックボックス12</span></label>
</div>

<input type="submit" value="内容を確認する" id="sbmt" disabled>

Comments

[rarara248]

本当にありがとうございます!!!
回答いただいたコードで動きました！

Answer 2

チェックボックスのグループであるdiv.checkboxの配列を checkboxGroups という変数に得られたとします。そうすると、

各グループで最低１つチェックされたら

という条件が満たされているときtrue、そうでないときfalseになる変数inputOk は以下で得られます。

const inputOk = checkboxGroups.every(group => group.querySelector(':checked'));

この inputOk を使ってボタンの活性、非活性を制御すればよいです。

• サンプル ???? tera: [e-mail]