6月11日(木)3、4コマ目
今日、やったこと
- 選択リスト選択データ取得
- ラジオボタン選択データ取得
- チェックボックス選択データ取得
今日のホワイトボード
選択リスト選択データ取得
以下を作った。
|
| 図 選択リスト サンプルアプリケーション |
<select>タグの選択データ取得に関するプロパティはいろいろある。
|
| 図 <select>タグの選択データに関するプロパティ |
HTMLファイル
JavaScriptファイル
ラジオボタン選択データ取得
ラジオボタンはグループ内で1つだけ選択可能。
以下をつくった。
|
| 図 ラジオボタン サンプルアプリケーション |
選択されたラジオボタンを取得する その１
以下の手順で。
①全ラジオボタンを取得
②checkedプロパティがTrueのラジオボタンを探す
①全ラジオボタンを取得
ラジオボタンの<input>タグを探す際に、タグ名＋name属性で検索。
セレクタは下図(上)のように、 [属性名=属性値] で属性名を検索条件に加えることができる。
|
| 図 タグ名＋name属性で検索 |
②checkedプロパティがTrueなラジオボタンを探す
選択されたラジオボタンはcheckedプロパティがTrueになっている。
取得したラジオボタンたち(=リスト)のforEach()メソッドを使って、リストからラジオボタンを１つづつ取り出し、checkedプロパティがTrueか否かをチェックする。
|
| 図 リストのforEach()メソッド |
この関数は
- 引数にリストの要素を順に受け取り
- 各要素を順に処理を実行
選択されたラジオボタンを取得する その２
セレクタ＋疑似クラスで選択されたラジオボタンを取得できる。
疑似クラスでタグの状態や条件を指定できる。下図の下。
|
|
| 図 セレクタ＋疑似クラス |
HTMLファイル
JavaScriptファイル
チェックボックス選択データ取得
チェックボックスは1グループ内で複数選択可能。
基本的にはラジオボタンの場合と同じ。
ただ、複数選択できる点に注意。
|
| 図 チェックボックス サンプルアプリケーション |
HTMLファイル
JavaScriptファイル
次回は
今日、やった選択系パーツを使った練習。
ひきつづき小ネタ。
