フォームのチェックボックスをつける際に、必ず１つ以上のチェックを入れてほしいってときがありますよね。
チェックボックスに１つ以上のチェックがないと送信できないようにする方法を紹介します。
今回は、javascriptを使用し、簡易的に簡単に実装します。
フォーム実装の参考にしてみてください。
フォームのチェックボックスを必須化！１つ以上チェックがないと送信できないようにする方法
では早速、HTMLから書いていきましょう！
こんな感じで複数のチェックボックスを用意しました。
<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()">ポイントとなるのは「check」と「return isCheck()」
「class=”check”」がついている部分で判断し、「onClick=”return isCheck()”」で実行します。
チェックされているか判断する部分をjavascriptで書いていきましょう。
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; }; }「check」の「checked」が何個あるか判断します。
「０」だった場合、「1つ以上選択してください。」と表示し、チェックが入るまで送信ボタンが押せない仕様です。
送信ボタンや確認ページに行くためのボタンに「return isCheck()」を追加しましょう。
これで、簡易なチェックボックス必須化、１つ以上ない場合送信できないフォームの完成です！
ABOUT ME
