こんばんは！
今回はJavaScriptのラジオボタンについてです。
ラジオボタンとは
いくつかの選択肢から１つを選択するときに使う、GUIウィジェットの一種です。
1を選択した状態
下記のように記述することで使用できます。
1 2 | <input type="radio_button" id="element_id" name="radio_group_name" value="element_value"> <label for="element_id">選択肢1</label> |
サンプルコード
ラジオグループで選択された番号を出力しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html> <head> <meta charset="utf-8"/> <title>radiobutton</title> </head> <body> <input type="radio" id="one" name="number" value="1番" onchange="func()"> <label for="one">1</label><br> <input type="radio" id="two" name="number" value="2番" onchange="func()"> <label for="two">2</label><br> <input type="radio" id="three" name="number" value="3番" onchange="func()"> <label for="cherry">3</label> <script type="text/javascript"> function func() { var numbers = document.getElementsByName("number"); for(var i = 0; i < numbers.length; i++){ if(numbers[i].checked) { document.getElementById("text").innerHTML="選択されたのは:"+numbers[i].value; } } } </script> <h1><div id="text"></div></h1> </body> </html> |
実行結果は以下のようになります。
