JSでradioボタンの情報を取得したい

こんにちは
現在JSを勉強しています
タイトル通りなのですがradioボタンの情報を取得するにはどうすればいいのでしょうか？
コードを書いてみたのですがうまくいきません
ご指導お願いします

JavaScript
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7  <form id = myForm>
8  試し1
9  <input type = "radio" id = "test">
10  <br>
11  試し2
12  <input type = "radio" id = "test">
13</form>
14  <br>
15  <input type = "button" id = btn value = "Click" onclick = "test_click();">
16
17  <script>
18  function test_click(myForm){
19    var radio = document.getElementById('myForm');
20    if(myForm.radio[0].cheked){
21      console.log("a");
22    } else {
23      console.log("b");
24    }
25  }
26  </script>
27</body>
28</html>
29

行動規範の内容に同意します

回答3件

HTML はこんな感じに整理してみました

html
1  <label for="radio1">試し1</label>
2  <input type="radio" name=test id=radio1>
3  <br>
4  <label for="radio2">試し2</label>
5  <input type="radio" name=test id=radio2>
6  <br>
7  <input type="button" id=btn value="Click" onclick="test_click();">

<label> を使うと文字とラジオボタンが関連付けられて、文字のクリックがラジオボタンのクリックとなり使いやすくなります

javascript はこんな感じです

javascript
1<script>
2function test_click(){
3  var radio = document.getElementsByName('test');
4  if(radio[0].checked){
5    console.log("a");
6  } else if(radio[1].checked){
7    console.log("b");
8  } else {
9    console.log("c");
10  }
11}
12</script>

id は重複文字列は使えないのでまとめて参照することができません
getElementById （Element で単数系）

name なら要素をまとめて参照することができます
getElementsByName （Elements で複数系）

チェック状態を確認するのは checked です

また、ラジオボタンの初期選択を指定しないのであれば、ボタンを押した時にどれも選ばれていないケースも考えられるので、それをどうするかの振る舞いも必要です
ただしそこは、「選んでなければbとする」とか、「初期選択はaにする」というように、仕様決めとの兼ね合いになります

投稿2015/07/16 09:18

takito

総合スコア3111

コード中のtest[i].valueがチェックされたradio buttonの値です。
alertで出力しています。

#radio buttonに値を設定していなかったので追記

JavaScript
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7  試し1
8  <input type = "radio" name="test" value="試し1">
9  <br>
10  試し2
11  <input type = "radio" name="test" value="試し2">
12  <br>
13  <input type = "button" value = "Click" onclick = "test_click();">
14
15  <script>
16  function test_click(){
17    var test = document.getElementsByName('test');
18    for (i = 0; i < test.length; i++) {
19        if (test[i].checked) {
20          alert(test[i].value);
21        }
22    }
23  }
24  </script>
25</body>
26</html>
27

投稿2015/07/16 09:14

編集2015/07/16 09:33

omochi

総合スコア410

ベストアンサー

id="test"
idの名前はページ上に１つが原則です
複数なら name="test" にします。

Javascript
1var radio = document.getElementsByName("test")

投稿2015/07/16 09:10

退会済みユーザー

総合スコア0

Yoshinori

2015/07/16 09:14

ご回答ありがとうございます以下のように書き換えたのですがエラーが出てしまいます <body> <form id = myForm> 試し1 <input type = "radio" name = "test"> <br> 試し2 <input type = "radio" name = "test"> </form> <br> <input type = "button" id = btn value = "Click" onclick = "test_click();"> <script> function test_click(myForm){ var radio = document.getElementByName('test'); if(myForm.radio[0].cheked){ console.log("a"); } else { console.log("b"); } } </script> </body>

退会済みユーザー

2015/07/16 09:26 編集

cheked じゃなくて checked です追記よく見たらformを参照してるんですね var radio = document.getElementsByName('test'); これは name="test" のものを集めた配列ですので if( radio[0].checked ) でいいです

Yoshinori

2015/07/16 09:48

ありがとうございます！！出来ました！！

行動規範の内容に同意します

あなたの回答