JavaScript

フォームのチェックボックスを必須化!1つ以上チェックがないと送信できないようにする方法

フォームのチェックボックスをつける際に、必ず1つ以上のチェックを入れてほしいってときがありますよね。
チェックボックスに1つ以上のチェックがないと送信できないようにする方法を紹介します。
今回は、javascriptを使用し、簡易的に簡単に実装します。
フォーム実装の参考にしてみてください。

フォームのチェックボックスを必須化!1つ以上チェックがないと送信できないようにする方法

では早速、HTMLから書いていきましょう!
こんな感じで複数のチェックボックスを用意しました。

<input type="checkbox" class="check" name="sample01" value="サンプル01">
<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」が何個あるか判断します。
「0」だった場合、「1つ以上選択してください。」と表示し、チェックが入るまで送信ボタンが押せない仕様です。
送信ボタンや確認ページに行くためのボタンに「return isCheck()」を追加しましょう。

これで、簡易なチェックボックス必須化、1つ以上ない場合送信できないフォームの完成です!

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)