[サクッと]input type=checkboxに上限を設ける[JavaScript]

複数選択可能なチェックボックスに上限を設ける方法です。

サンプル

HTML

<input type="checkbox" name="test">選択肢1
<input type="checkbox" name="test">選択肢2
<input type="checkbox" name="test">選択肢3
<input type="checkbox" name="test">選択肢4
<input type="checkbox" name="test">選択肢5
<input type="checkbox" name="test">選択肢6
<input type="checkbox" name="test">選択肢7

JavaScript

const checkMax = 3;
const checkBoxes = document.getElementsByName('test');

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);
  })
});

簡単な解説

const checkMax = 3;

変数「checkMax」で最大上限数を指定。

const checkBoxes = document.getElementsByName('test');

変数「checkBoxes」でチェックボックスのネーム属性から要素を指定。
（指定できればクラス属性等でも構わない。）

  if (checkCount > checkMax) {
    alert('最大3つまで');
    target.checked = false;
  }

「alert(‘最大3つまで’);」の部分に最大数を超えた場合の処理を記述。