ラジオボタン(HTML)

　ブログでは記事の中で何か選択すると言うことはまずないのですが、
ホームページでは設ける可能性も考えられます。

そこで、HTMLのformタグの中で使えるinputタグのtype属性が
radioのラジオボタンを取り上げてみます。

何でラジオボタンっていうかと言いますと、昔のラジオは選曲するボタンが複数あって、1つのボタンを押すと他のボタンが元に飛び出しリセットされる様子がこれに似ているためのようです。

いつものように、まずケチャップではなくソースです。

ソース①

---

<form name="fohmu">
選択<input type="radio" name="botan" value="1">１番
<input type="radio" name="botan" value="2">２番
<input type="radio" name="botan" value="3" checked>３番
</form>

---

例

選択１番 ２番 ３番

ボタンを押してみてください。
すぐ下のテキスト欄に結果が表示されると思います。

ソース①はミニマムな基本例なので、例のようなラジオボタンを押すごとに何か動作をするわけではありません。
しかしラジオボタンを押すことでデータとしてはセットされているはずです。

ちょっと説明を加えますと、
inputタグはformタグの中で使うということにしてください。
formタグの名前が"fohmu"です。
他にもformタグが存在する時の為に区別するために名づけておきます。

inputタグのtype属性を"radio"にするとボタンが使えます。
ここではボタンが3つありますので
これらをまとめてbotanと言う名前でまとめておきます。
ちょっとinputタグのデータの型がわからなかったのですが、
こうすることで、後でどのボタンが押されたかを調べる時に、
botanという名前の配列型として結果を取り出しやすくなります。
このあたりは流してください。

ソース①のinputタグの3番の部分だけ
[checked]が追加されていますが
これによって、予め3番目をオンにすることができます。
最初にページを開いた時、すでに3番がオンで、
テキスト欄に「3番を選択しました」と表示されていました。

いっきには大変なので、とりあえずラジオボタンの説明は
終わりとしますが、またご質問等ございましたら、お願いします。

一応、上の例を実現しているしょうゆ、いやっ、ソースを
ソース②に示しておきます。

ソース②

---

<script type="text/javascript"><!--
function kekka(){
 for (i = 0; i <=2; i++){
  if (document.getElementsByName("botan")[i].checked == true)   document.fohmu.hyoji.value = i+1+"番を選択しました";
 }
}
//--></script>
<center>
<form name="fohmu">
選択<input type="radio" name="botan" value="1" onClick="kekka()">１番
<input type="radio" name="botan" value="2" onClick="kekka()">２番
<input type="radio" name="botan" value="3" checked onClick="kekka()">３番
<br /><br />
<input type="text" name="hyoji" style="text-align:center">
</form>
</center>
<script type="text/javascript"><!--
kekka();
//--></script>

---

タグ：HTML ラジオボタン