ONZE/BLOGオンズ開発ブログ

ラジオボタンは通常、何も選択されていない状態ですが、一度どれかを選択してチェックマークをつけると「何も選択していない状態」には戻れないんですよね。

そこでJavaScriptを使って「どのラジオボタンにもチェックが入っていない状態」に戻す機能を作りました。

HTML

まずはhtmlを用意します。

<form id="sample">
	<label><input type="radio" name="rb" value="r1">ラジオボタン1</label><br>
	<label><input type="radio" name="rb" value="r2">ラジオボタン2</label><br>
	<label><input type="radio" name="rb" value="r3">ラジオボタン3</label><br>
	<input type="button" value="どれも選択しない" onclick="radio_off();">
</form>

ここではすべてのラジオボタンをid="sample"と名付けたform要素で囲っています。

JacvaScript

今回のキモになるJavaScriptのコードです。

function radio_off() {
	var ElementsCount = document.getElementById("sample").elements.length;
	for( i=0 ; i<ElementsCount ; i++ ) {
		document.getElementById("sample").elements[i].checked = false;
	}
}

「document.getElementById()」で先ほど用意したform要素を指定。
id属性は1つのウェブページに1度しか使えないので注意してください。