HTMLとJavaScriptでチェックボックス選択数を制限し、フォーム送信を制御する方法

HTMLとJavaScriptでチェックボックスの選択数を制限し、条件に合わない場合にフォームの送信を停止する方法を解説します。特に「必ず2つ選択してください」といった条件付きのフォーム送信で、選択数が満たされていない場合にページ遷移やフォーム送信を防ぐ方法について説明します。

1. チェックボックス選択数の制限
2. フォーム送信の制御
3. イベントリスナーで確認ボタンを制御
4. 確認とページ遷移の停止
5. まとめ

1. チェックボックス選択数の制限

まず、HTMLで複数のチェックボックスを作成し、JavaScriptを使って選択された数をカウントします。指定された数、ここでは「2つ選択」と設定します。

2. フォーム送信の制御

選択されたチェックボックスの数が2つでない場合、確認ボタンを押してもフォームの送信を制御するためにJavaScriptで制御を行います。以下のコードで、選択数を確認し、条件を満たさない場合に送信を防ぐ方法を実装します。

const button3 = document.querySelector('#button3');
const form3 = document.querySelector('#form3');
const fruitCheckBoxs = document.getElementsByName('fruit');
const maxChecksFruit = 2;

document.addEventListener('DOMContentLoaded', () => {
  fruitCheckBoxs.forEach(function(fruitCheckBox) {
    fruitCheckBox.addEventListener('change', function() {
      let checkedCount = 0;
      fruitCheckBoxs.forEach((cb) => {
        if (cb.checked) {
          checkedCount++;
        }
      });
      if (checkedCount < maxChecksFruit) {
        alert('必ず2つ選択してください');
        button3.addEventListener('click', (e) => {
          e.preventDefault();
        });
      } else {
        button3.addEventListener('click', () => {
          form3.submit();
        });
      }
    });
  });
});