JavaScriptの「Form」オブジェクトと各「elements」の入力を取得する基本JavaScript標準ライブラリの使い方超入門(8)(3/5 ページ)

» 2016年11月15日 05時00分 公開
[金城俊哉]

「どれか1つ」と「好きなだけチェック」ってどこが違うの?(ラジオボタンとチェックボックス)

 テキストフィールドなどのテキスト関連の要素は、ユーザーが自由に入力できるのもでしたが、あらかじめ用意された項目の中から選択してもらう手段として、ラジオボタンとチェックボックスが用意されています。この2つはWebページだけでなく、アプリケーションの設定画面などでもよく見かけますよね。

Onepoint

 ラジオボタンは項目の「オン/オフ」、チェックボックスは「チェックする/チェックしない」によって選択しますが、ラジオボタンの場合は1つの項目しか選択できません。

  • ラジオボタン・・・・・選択肢の中から1つの項目のみ選択可
  • チェックボックス・・・複数の選択肢の中からいくつでも選択可

どれか1つを選択(ラジオボタン)

Onepoint

 ラジオボタンは、複数の選択肢の中から1つの項目だけを選択できます。input要素のtype属性で「"radio"」を指定し、name属性の値を同じにすることで、同一のグループのラジオボタンと見なされるので、どれか1つの項目しか選択できないようになります。

コード例
表示したところ
Onepoint

 同じname属性の要素が複数、存在することになるので、個々の要素を区別できるように、配列としてまとめて扱われます。個々の要素にアクセスするには、次のように0から始まるインデックスを指定します。

コード例

3つの選択肢から1つを選択してもらう

Navigator

「では、ラジオボタンを使った例として、3つの選択肢の中から1つを選択してもらい、どの項目が選択されたのかを調べてみることにしましょう。まずは次のプログラムを見てください」


どのラジオボタンがオンになったかを調べる(RadioButton.html)
実行結果
配置したラジオボタンのname属性の値を同じにすると、1つのラジオボタングループとしてまとめられる。
Navigator

ページ上に配置した3個のラジオボタンのname属性は『contact』としました。これによって3個のラジオボタンが1つのグループとしてまとめられ、1つのボタンしかオンにできなくなります


Driver

「name属性が同じだと1つのグループになるわけですね」


Navigator

「(1)では、lengthプロパティを使ってラジオボタンの数を取得し、この数に達するまでforループによる処理を行います。前回は『document.frm.elements.length』のように、lengthプロパティでフォーム内の要素数を取得しましたが、今回は、ラジオボタンのname属性を指定して、ラジオボタンの数を取得するようにしています


同じname属性の要素の数を調べる
Driver

「フォーム内にname属性がcontactになってる要素の数を取得すれば、それがすなわち項目数ってことになりますからね」


Navigator

(2)のcheckedプロパティは、対象のラジオボタンがオン、またはチェックボックスがチェックされている場合にtrueとなり、それ以外はfalseとなります。そこで、次のようにすれば、ラジオボタンの配列の各要素に対してオンであるかを調べることができますよね」


name属性がcontactになっている要素のcheckedプロパティを順番に参照
Driver

「で、結果がtrueであれば、変数resultに対象のラジオボタンのvalueプロパティの値を代入するのですね」


Navigator

「valueプロパティでHTMLタグのvalue属性の値を取得できますからね。なお、ラジオボタンは単一選択なので、処理が済めば以降の処理は実行しても無駄になってしまいます。そこで、処理終了後にbreak文で即座にループを脱出するようにしています


ラジオボタン配列のインデックスを指定してvalueプロパティを参照
Driver

「なるほど、オンになってる項目が見つかれば、あとの処理は必要ないですもんね」


好きなだけ選択(チェックボックス)

Onepoint

 チェックボックスは、複数の選択肢の中から好きな数だけ1つの項目だけを選択できます。input要素のtype属性で「"checkbox"」を指定します。

コード例
表示したところ
チェックボックスのname属性の値を統一することで、配列として扱えるようにする。

 name属性の値を同じにすることで、JavaScript側からはチェックボックスを配列として取得できるようになります。個々の要素にアクセスするには、ラジオボタンと同様に0から始まるインデックスを指定します。


コード例

4つの項目から選択してもらう

Navigator

「チェックボックスを使った例として、4つの選択肢の中から任意の数だけ選択してもらい、どの項目がチェックされているのかを調べる例を見てみましょう。プログラムの内容は、ラジオボタンのときとほぼ同じです」


Driver

「チェックボックスはいくつでも選択OKですから、ラジオボタンのときのようにbreak文でループを抜ける処理は必要ないですね」


どの項目がチェックされているかを調べる(CheckBox.html)
実行結果

Tips フォーム要素を無効にする

 ある条件において、特定の要素の入力を不可にしたい場合は、disableプロパティを利用します。

disableプロパティ
構文 document.form.element.disabled
設定値 true 有効(入力不可)
false 無効(入力可)

 では、チェックボックスをチェックした場合にのみ、ラジオボタンとテキストフィールドが有効になるようにしてみることにします。なお、チェックボックスのチェックボックスの状態はonclickプロパティで取得するので、これまでのボタンのイベントリスナーと同じものを用意します。

チェックを入れるとラジオボタンとテキストフィールドを有効にする(disable.html)
実行結果

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。