JavaScriptでチェックボックスのチェック数を制限する方法について書いています。
例えば、複数あるチェックボックスから、選択可能な項目を2つまでや3つまでしか入力できないようにするといった形です。
ここでは、JavaScriptのみで実例を紹介、解説しています。
JavaScriptで選択数(チェック数)を制限する
checkboxのチェックは要素のcheckedにアクセスすると、制御することができます。
下記は、5つのチェックボックスの項目を表示して、2つまでしかチェックできないようにしたサンプルコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>チェックボックスの入力制限</title>
<script>
window.onload = () => {
const fruits = document.querySelectorAll('.fruits');
const limit = 2;
fruits.forEach((element) => {
element.addEventListener('change', (event) => {
const fruitCheckCount = document.querySelectorAll('.fruits:checked').length;
if (limit < fruitCheckCount) {
event.target.checked = false;
}
});
});
}
</script>
</head>
<body>
<form>
<p>チェックできるのはふたつまで！</p>
<label>
<input type="checkbox" class="fruits" name="fruits[]" value="1" /> ぶどう
</label>
<label>
<input type="checkbox" class="fruits" name="fruits[]" value="2" /> りんご
</label>
<label>
<input type="checkbox" class="fruits" name="fruits[]" value="3" /> みかん
</label>
<label>
<input type="checkbox" class="fruits" name="fruits[]" value="4" /> もも
</label>
<label>
<input type="checkbox" class="fruits" name="fruits[]" value="5" /> ばなな
</label>
</form>
</body>
</html>
htmlの解説
body配下にformを設置して、チェックボックスを5つ作成しました。
それぞれアクセスしやすいように、class属性にfruitsクラスを設定しました。
このチェックボックスを入力できるのを2つまでに制限します。
head箇所には、制御するためのjavascriptを書きました。
javascriptの解説
window.onloadで、画面が読み込まれたときに、中に書いた処理が読み込まれるようにしています。
「document.querySelectorAll('.fruits')」で5つのチェックボックスすべてを取得して、fruits変数に設定しました。
limit変数には入力可能な数を設定しています。
そのあとに、fruits変数をforEachでループしています。
element変数にひとつずつのチェックボックスが入ってくるので、addEventListenerメソッドを使ってイベントを設定しました。
changeなので、値が変わった時に、この中に書いた処理が動きます。
「document.querySelectorAll('.fruits:checked').length」で全てのチェックされたチェックボックスの件数を取得しました。
fruitCheckCount変数にチェック件数をいれて、limit変数の値を超えていたら、event.target.checkedをfalseに設定してチェックした時のチェックを外しています。
つまり、チェックしたときにすべてのチェック件数を取得して
最大数を超えていたら、チェックした項目のチェックを外すといったことをしています。
動作確認
実際にこちらのコードを動かすと、下記のようにチェックボックスが表示されて、3つ目以降はチェックされないことが確認できます。
終わりに
今回はJavaScriptを使って、チェックボックスの入力数を制限してみました。
全てのチェック件数を取っておいて、チェックした時に最大値と比較することで実装できました！
コメント