この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Webプログラミング講座初級 第七回 スクリプトでフォーム部品を操作する~チェックボックスとラジオボタン編~

今回はチェックボックスとラジオボタン編です。
チェックボックスとラジオボタンは似ていますが、チェックボックスが複数選択できるのに対して、ラジオボタンはひとつしか選択できません。

チェックボックスとラジオボタンは選択肢が少数の場合に有効です。
あまり多く並べるとブラウザのレンタリングが遅くなるので、選択肢が多い場合はプルダウンメニューやリストを使います。

基本形は以下の通りです。

チェックボックス
<input type="checkbox" name="checkbox" id="checkbox1" value="チェックボックス1">
<input type="checkbox" name="checkbox" id="checkbox2" value="チェックボックス2">
<input type="checkbox" name="checkbox" id="checkbox3" value="チェックボックス3" checked>

ラジオボタン
<input type="radio" name="radio" id="radio1" value="ラジオボタン1">
<input type="radio" name="radio" id="radio2" value="ラジオボタン2">
<input type="radio" name="radio" id="radio3" value="ラジオボタン3" checked>

変わっているのは「name属性」です。チェックボックスもラジオボタンも「name属性」によってグループ化しています。「name属性」を同じにすることでグループごとに連動するという特徴があります。
また「checked」オプションで最初からチェック済みにできますが、ラジオボタンだけはひとつしか選択できないので「checked」も一つしか指定できません。

チェックボックスもラジオボタンもこれまでと同様に、値を取るという動作自体は単純に「.val()」メソッドでできます。

値を取得するには以下のようにします。

//チェックボックス
$checkbox = $( '#checkbox1' ).val();

//ラジオボタン
$radiobtn = $( '#radio1' ).val();

値を設定するには以下のようにします。

//チェックボックス
$( '#checkbox1' ).val( '新チェックボックス1' );

//ラジオボタン
$( '#radio1' ).val( '新ラジオボタン1' );

しかし、やりたいことは選択された値を得ることなので、上記の方法はあまり使わないと思います。
ユーザーが選択した値を得るには「name属性」で検索し「:checked」フォームフィルターを掛けます。
チェックボックスの場合は「[name=checkbox]:checked」とすればチェックされた値に絞り込めます。

フォームで使えるフォームフィルターは4種類あります。

[note]
セレクタ:enabled……利用可能な要素に絞り込み
セレクタ:disabled……利用不可能な要素に
セレクタ:checked……チェックされた要素に絞り込み(チェックボックスとラジオボタン)
セレクタ:selected……選択された要素に絞り込み(プルダウンメニューとリスト)
[/note]

問題はチェックボックスの場合、チェックされた値が複数ある可能性があることです。複数ある場合は配列変数で返ってきます。
そこで、その配列を処理するために「$.map()」文を使います。
前回配列の処理に「$.each()」文を使いましたが動作は似ています。
違いは「$.map()」文は配列を操作し新しく配列を返してくれるところです。

「$.each()」文は単に配列を処理していましたが、「$.map()」文は戻り値があり、新たに配列を返してくれます。あとコールバック「function( $element , $i )」「$.each()」文と引数がなぜか逆なので注意です。

//対象のチェックボックスをフィルターで絞り込み
$checkedArrValue = $( '[name=checkbox]:checked' );

//$.map()文で処理して新たに配列に代入する
$checkedArrValue2 = $.map( $checkedArrValue, function( $element , $i )
{
	//値を取得して返す
	return $( $element ).val();
});

//.join()メソッドで配列要素をカンマで繋げて表示する
$( '#result' ).text( $checkedArrValue2.join( ", " ) );

次にラジオボタンです。ラジオボタンは返ってくる値が必ず1つです。返ってくる値は配列ではなくただの変数なのでチェックボックスよりは単純です。

//チェックされたラジオボタンをフィルターで絞り込み
$checkedValue = $( '[name=radio]:checked' ).val();
//表示する
$( '#result' ).text( $checkedValue );

以下はサンプルとなります。

関連記事