チェックボックス 1つ以上選択チェックを必須にする方法【javascript】｜カケウェブ

フォームでチェックボックスに１つ以上チェックを入れないと送信できないようにする方法を紹介します。
これは、プライバシーポリシーに同意するなど、お問合せフォームでよく見かける仕様に応用できたり、ラジオボタンのように必須にしたいけど、複数選べるようにしたいときに有効です。
コピペで実装できるので、是非参考にしてみてください。
※ブラウザのJavaScriptを止められると動かなくなってしまうので、バックエンドでの処理は別で必要です。

javascriptを使用してチェックボックスを１つ以上チェックを必須にする方法

では早速javascriptを使用して、チェックボックスを１つ以上チェックしないとフォームを送信できないようにしていきます。

チェックボックスを１つ以上必須にする【HTML】

今回重要になるのは、classの「check」。
このclassの情報を取得して判断するので、名前を変更しても問題ありませんが、必ず入れてください。

<input type="checkbox" class="check" name="sample01" value="サンプル0１">
<input type="checkbox" class="check" name="sample01" value="サンプル02">
<input type="checkbox" class="check" name="sample01" value="サンプル03">
<input type="checkbox" class="check" name="sample01" value="サンプル04">
<input type="checkbox" class="check" name="sample01" value="サンプル05">

<input type="submit" value="内容を確認する" onClick="return isCheck()">

チェックボックスを１つ以上必須にする【javascript】

「check」の「checked」を判断します。
ない場合、「1つ以上選択してください。」とウィンドウが表示されるようにしています。

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

}

以上！
フォームのチェックボックスで１つ以上を必須にしたい場合の参考にしてみてね♪

おすすめ書籍