複数のチェックボックスでどこにもチェックがはいっていない場合にエラーを流すJAVASCRIPTのやり方を教えてください。

JavaScript59閲覧

ベストアンサー

0

ThanksImg質問者からのお礼コメント

ありがとうございます^_^

お礼日時:1/26 12:27

その他の回答(1件)

0

「エラーを流す」というのは、 どのタイミングで、どこに「流す」のだろうか? やりたいことの仕様について、 その辺りが何も提示されていないんで、 仮に「決定」ボタンが押されたタイミングで、 アラート表示でエラーを表示するものとして回答する。 ■■■ 実施例 ■■■ 解説の前に、 まず実際のソースコードの実施例を示しておく。 ──────────────── <form> <!-- ── 選択肢 ── --> <section> <label><input name="mych" type="checkbox" value="A">A</label> <label><input name="mych" type="checkbox" value="B">B</label> <label><input name="mych" type="checkbox" value="C">C</label> </section> <!-- ── 決定ボタン ── --> <section> <input type="button" value="決定" onclick=" // チェックされているボックス const checked = Array.from( this.form.mych ).find( ch => ch.checked ); // チェックされているボックスが無ければエラー if( ! checked ) { alert( '項目が選択されていません' ) } "> </section> </form> ──────────────── ■■■ 解説 ■■■ 【 HTML 】 HTML では、 <form> 要素内に、 チェックボックスの選択肢を設置するセクションと、 決定ボタンを設置するセクションを設置して、 各セクションの中身を構成する。 チェックボックスは、 選択肢の文字をクリックしてもチェックボックスにチェックが入るよう、 <label> 要素で囲っておくと親切。 また、 共通の設問に対する選択肢のチェックボックスには、 共通の name 属性を指定しておく。 ──────────────── <form> <!-- ── 選択肢 ── --> <section> <label><input name="mych" type="checkbox" value="A">A</label> <label><input name="mych" type="checkbox" value="B">B</label> <label><input name="mych" type="checkbox" value="C">C</label> </section> <!-- ── 決定ボタン ── --> <section> <input type="button" value="決定"> </section> </form> ──────────────── 【 Javascript 】 決定ボタンをクリックしたときの動作を、 決定ボタンの onclick 属性に Javascript のコードで指定する。 ──────────────── <!-- ── 決定ボタン ── --> <section> <input type="button" value="決定" onclick=" ~ ここに Javascript コード ~ "> </section> ──────────────── 決定ボタンの onclick 内に記述する Javascript コードでは、 「this」というキーワードは決定ボタン自身への参照、 「this.form」でその決定ボタンが所属する <form> 要素への参照になり、 「this.form.mych」は、 <form> 要素内にある name="mych" の要素への参照のリストになる。 ──────────────── [ this.form.mych ] . . ├─<input name="mych" type="checkbox" value="A"> . . ├─<input name="mych" type="checkbox" value="B"> . . └─<input name="mych" type="checkbox" value="C"> ──────────────── このリストからチェックされているボックスを見つけるには、 配列の find() メソッドを使うと1発。 ただ、 このリストは配列のような作りをしているけど、 配列とは別の形式だから find() メソッドが使えない。 そこで、 リストを Array.from() で配列形式にしてから filter() メソッドを使い、 チェックされたボックスを取得する。 ──────────────── const checked = Array.from( this.form.mych ).find( ch => ch.checked ); ──────────────── あとは、 このチェックされたボックスが「なし」つまり「undefined」のときに、 アラートでエラーを表示すればいい。 ──────────────── if( ! checked ) { alert( '項目が選択されていません' ) } ──────────────── 注意として、 ここに記述している Javascript は、 onclick="~" のダブルクォーテーション "~" で囲われているから、 文字列「項目が選択されていません」を囲うのに "~" が使えない。 onclicki="~" 内で文字列を囲う場合は、 ダブルクォーテーション "~" ではなく、 シングルクォーテーション '~' で囲う必要がある。 以上、決定ボタン部分のコードをまとめると、 ──────────────── <input type="button" value="決定" onclick=" const checked = Array.from( this.form.mych ).find( ch => ch.checked ); if( ! checked ) { alert( '項目が選択されていません' ) } "> ──────────────── となる。