<input type="radio" name="(グループ名)"/>
HTMLでラジオボタンを表示するコードを紹介します。
HTMLでラジオボタンを表示する場合には、inputタグを利用します。type属性に "radio" を指定するとラジオボタンを表示できます。
intput タグのtype属性にradioを指定します。またname属性にラジオボタンのグループ名を設定します。
<input type="radio" name="(グループ名)"/>
表示時にチェックをつけた状態で表示する場合は、checked 属性に "checked" を設定します。
<input type="radio" name="(グループ名)" checked="checked"/>
チェックされた値を取得するにはフォームのサブミットを利用するか、JavaScriptで取得する方法があります。
JavaScriptでラジオボタンのチェックを亜取得するコードについてはこちらの記事を参照してください。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form name="form1" action="">
<input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">ラジオボタン 要素1</label><br/>
<input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">ラジオボタン 要素2</label><br />
<input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">ラジオボタン 要素3</label><br />
</form>
<div id="output"></div>
</body>
</html>
上記のHTMLファイルをWebブラウザで開くと、下図の画面が表示されます。
クリックするとラジオボタンのチェックを変更できます。
ラジオボタンを表示するHTMLの例を紹介します。
下記のHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Radio Buttonのデモです<br />
<hr />
<input type="radio" name="g1" value="v1" /><br />
<input type="radio" name="g1" value="v2" /><br />
<input type="radio" name="g1" value="v3" /><br />
<hr />
<input type="radio" name="g2" value="v1" /><br />
<input type="radio" name="g2" value="v2" /><br />
<input type="radio" name="g2" value="v3" /><br />
</body>
</html>
inputタグを記述してチェックボックスを表示します。name 属性が"g1"のラジオボタンを3つ、"g2"のラジオボタンを3つ配置し2つのグループに分けています。
ラジオボタンを複数のグループに分ける場合は name属性をグループごとに違った名称に設定します。上記の例では、上部3つのラジオボタンのname属性が g1となっており、この3つのラジオボタンのチェックは排他になります。 4番目から６番目のラジオボタンのname属性はg2となっており、この3つのラジオボタンのチェックも排他になりますが、g1のラジオボタンとはチェックは排他になりません。
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
ラジオボタンをクリックすると、ボタンにチェックが付き選択状態になります。
別のラジオボタンをクリックすると、クリックしたラジオボタンにチェックが付き、チェックが付いていたラジオボタンのチェックが外れます。
下のラジオボタン3つは別のname属性になっているため、グループが違います。ラジオボタンをクリックするとチェックが付きますが、
上のラジオボタンのチェックは解除されません。
下のラジオボタンの別のラジオボタンをクリックするとした3つのラジオボタンはトグル状態になっており、他のラジオボタンのチェックが解除されます。
ラジオボタンを表示してデフォルトでチェックを設定するコードを紹介します。
デフォルトでチェックをする場合は、デフォルトでチェックするラジオボタンに checked="checked"を追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Radio Buttonのデモです<br />
<hr />
<input type="radio" name="g1" value="v1" checked="checked"/><br />
<input type="radio" name="g1" value="v2" /><br />
<input type="radio" name="g1" value="v3" /><br />
<hr />
<input type="radio" name="g2" value="v1" checked="checked" /><br />
<input type="radio" name="g2" value="v2" /><br />
<input type="radio" name="g2" value="v3" /><br />
</body>
</html>
name 属性が"g1"と"g2"の2つのラジオボタンのグループを作成しています。
それぞれのグループの一番上のラジオボタンにchecked="checked"を記述してデフォルトでチェックが付く設定にしています。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。それぞれのグループの一番上のラジオボタンにチェックが付いていることが確認できます。
別のラジオボタンをクリックするとラジオボタンのチェックは変更できます。
HTMLページでラジオボタンを表示できました。
