DOMによるフォーム・コントロールの操作(4/6):初心者のためのJavaScriptプログラミング入門

DOMによるフォーム・コントロールの操作 (4/6)

作成:2010-04-02 15:00
更新:2010-05-11 18:45

■ラジオボタンを巡る２通りのやり方

テキストを入力する関係のフォーム・コントロールは、それほど扱いは難しくありません。<input type="text">関係は先にやったようにvalueで値を取り出せますし、<textarea>はinnerHTMLで値が得られます。

チェックボックスである<input type="checkbox">は、「checked」というプロパティでチェックされた状態を知ることができます。ところが、注意しないといけないのは、似ているようで違う「ラジオボタン」です。これもやはりON/OFFするコントロールですが、「複数の中から１つを選ぶ」という働きをするものですから、実はON/OFFではなく「選択」のコントロールなのです。従って、「いくつかあるラジオボタンの中から、選択されたものを探し出す」というやり方を考える必要があります。

○総当たり方式○

まず、正統的？なやり方からです。ラジオボタンは、同じグループ（クリックして１つを選ぶ仲間たち）のものはすべて同じ名前（name属性）をつけることになっています。従って、同じ名前のDOMオブジェクトをすべて取り出し、それらをすべて「選択されているかどうか］チェックしていけば、選択されているラジオボタンを知ることができます。

下のリスト部分（１つ目のもの）が、その例です。ここでは、"radios"という名前のDOMオブジェクトをすべてまとめて取り出しています。以下の部分ですね。

var radios = document.getElementsByName("radios");

「getElementsByName」というのは、引数に指定した名前のコントロールに対応するDOMオブジェクトを配列で返すメソッドです。IDと異なり、name属性は同じ名前のものが複数存在する場合があるため、値は配列となるのです。

こうしてラジオボタンすべてのオブジェクトが得られたら、forの繰り返しを使い、順番にオブジェクトを取り出しては「checkd」プロパティがtrueかどうかを調べます。このcheckedは、選択されているかどうかを示すプロパティで、選択されていればtrueになります。ifでこれをチェックし、trueならばそのオブジェクトのvalueを取得してメッセージを表示しているわけです。

○thisを引数にするやり方○

このgetElementsByNameによるやり方は、考え方としては正しいのですが、正直、「たかがラジオボタンをチェックするのに、こんな面倒くさいことをやるのか」と思ってしまったかも知れません。

実は、もっと簡単なやり方があります。「ラジオボタンがONになっている」というのは、つまり「最後にそれがクリックされた」ということでもあります。つまり、onclickでクリックしたイベント処理をするとき、「クリックしたオブジェクト」を関数に渡すことができれば、もっともっとシンプルに処理できるわけです。

そこで考えたのが、下のリスト（２つ目のもの）です。ここでは、それぞれのラジオボタンのonclick属性を以下のように設定してあります。

onclick="doAction(this);"

引数にthisを渡すことで、イベントが発生したオブジェクトをdoActionに渡すことができます。後は、引数で渡されたオブジェクトのvalueを取り出して処理するだけです。実に単純ですね！

※注意！――使えるfor、使えないfor

ここでは、繰り返し処理を行うのに「for(var i = 0;i < radios.length;i++)」というようにしてforを使っています。が、中には「for(radio in radios)のほうがスマートじゃ？」と思った人もいるかも知れません。

結論から言えば、これは使えません。このfor(○ in ○)では、用意されているコントロール以外の値まで混じってしまうのです。

実を言えば、getElementsByNameで取り出されるのは配列ではなく、「HTMLCollection」というオブジェクトなのです。このため、配列のように保管している要素だけでなく、それ以外のプロパティなどもその中に含まれています。for inを使うと、そうしたものまですべて取り出してしまうのです。実際、やってみると保管している項目の他にも「length」プロパティの値などまで取り出されてしまうのです。

というわけで、「getElementsByNameで取り出したものは、for inを使わない」のが基本と考えてください。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※nameで取り出し総当たりで調べるやり方

<html>
	<head>
		<script type="text/javascript">
		<!--
		function doAction(){
			var radios = document.getElementsByName("radios");
			for(var i = 0;i < radios.length;i++){
				var radio = radios[i];
				if (radio.checked){
					var val =radio.value;
					var message = document.getElementById("message");
					message.innerHTML = "あなたは、" + val + "ですね。";
				}
			}
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<div id="message">性別を選択：</div>
		<form onsubmit="return false;">
			<input type="radio" id="r1" name="radios"
					onclick="doAction();" value="男">
				<label for="r1">男です。</label><br>
			<input type="radio" id="r2" name="radios"
					onclick="doAction();" value="女">
				<label for="r2">女です。</label><br>
			<input type="radio" id="r3" name="radios"
					onclick="doAction();" value="両性具有">
				<label for="r3">両方です。</label>
		</form>
	</body>
</html>



※引数を使ったやり方

<html>
	<head>
		<script type="text/javascript">
		<!--
		function doAction(obj){
			var val = obj.value;
			var message = document.getElementById("message");
			message.innerHTML = "あなたは、" + val + "ですね。";
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<div id="message">性別を選択：</div>
		<form onsubmit="return false;">
			<input type="radio" id="r1" name="radios"
					onclick="doAction(this);" value="男">
				<label for="r1">男です。</label><br>
			<input type="radio" id="r2" name="radios"
					onclick="doAction(this);" value="女">
				<label for="r2">女です。</label><br>
			<input type="radio" id="r3" name="radios"
					onclick="doAction(this);" value="両性具有">
				<label for="r3">両方です。</label>
		</form>
	</body>
</html>

※関連コンテンツ

<< prev next >>

「初心者のためのJavaScriptプログラミング入門」に戻る