<input id="(ラジオボタンのID)" type="radio" /><label for="(ラジオボタンのID)">ラジオボタンの説明</label>
ラジオボタンの右側の文字列をクリックすると、ラジオボタンにチェックがつく動作にするコードを紹介します。
ラジオボタンのキャプションの文字列をクリックした際に、ラジオボタンにチェックをつけたい場合があります。
この場合はlabelタグを利用してキャプションの文字列を記述します。labelタグのfor属性に対応するラジオボタンのIDを設定します。
<input id="(ラジオボタンのID)" type="radio" /><label for="(ラジオボタンのID)">ラジオボタンの説明</label>
labelタグの文字列をクリックすると、for属性で指定したラジオボタンがチェックされます。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Radio Buttonのデモです<br />
<hr />
<input type="radio" id="radio1" name="g1" value="v1" checked="checked"/><label for="radio1">ラジオボタン 1</label><br />
<input type="radio" id="radio2" name="g1" value="v2" /><label for="radio2">ラジオボタン 2</label><br />
<input type="radio" id="radio3" name="g1" value="v3" /><label for="radio3">ラジオボタン 3</label><br />
<hr />
<input type="radio" id="radio4" name="g2" value="v1" checked="checked" /><label for="radio4">ラジオボタン 4</label><br />
<input type="radio" id="radio5" name="g2" value="v2" /><label for="radio5">ラジオボタン 5</label><br />
<input type="radio" id="radio6" name="g2" value="v3" /><label for="radio6">ラジオボタン 6</label><br />
</body>
</html>
inputタグを利用してラジオボタンを表示しています。ラジオボタンの右側にlabelタグを記述しラジオボタンのキャプションを表示しています。
for属性に左側のラジオボタンのIDを指定することで、ラジオボタンの右側のキャプションをクリックするとラジオボタンが選択状態になる動作となります。
上記のHTMLファイルを表示します。下図のページが表示されます。
ラジオボタンの右側の [ラジオボタン 3] の文字列をクリックすると、3番目のラジオボタンが選択状態になります。
同様に[ラジオボタン5]の文字列をクリックすると、5番目のラジオボタンが選択状態になります。
