Q&A
コードの実行結果、エラーが起きる場合はエラーメッセージ、それに何がわからないのかも書いてください。
こちら参考にしています
https://javascript.programmer-reference.com/js-radio-value/
上記サイトを参考にラジオボタンの内容をテキストで出力したいのですが何も変化が起きなくて、出力の仕方がわかりません。
アドバイスなどいただけると助かりますよろしくお願いします。
<html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="sample.js"></script> </head> <body> <input type="radio" name="grp1" value="1">項目１ <input type="radio" name="grp1" value="2">項目２ <input type="radio" name="grp1" value="3">項目３ <input type="button" value="ボタン" onclick="getRadioValue('grp1');"> </body> <output type="text" id="resultRadio"></output> <script> function getRadioValue(name){ //ラジオボタンオブジェクトを取得する var radios = document.getElementsByName(name); //取得したラジオボタンオブジェクトから選択されたものを探し出す var result; for(var i=0; i<radios.length; i++){ if (radios[i].checked) { //選択されたラジオボタンのvalue値を取得する result = radios[i].value; break; } } //value値を表示する // alert("value値は" + result + "です"); resultRadio = result; } </script> </html>
回答2件
0
ループしながらチェックしなくてもquerySelectorで掴むほうが今風
javascript
1<script> 2function getRadioValue(name){ 3 var res = document.querySelector('[name="'+name+'"]:checked'); 4 document.querySelector('#resultRadio').value = res?res.value:""; 5} 6</script> 7<label><input type="radio" name="grp1" value="1">項目１</label> 8<label><input type="radio" name="grp1" value="2">項目２</label> 9<label><input type="radio" name="grp1" value="3">項目３</label> 10<input type="button" value="ボタン" onclick="getRadioValue('grp1');"> 11<input type="text" id="resultRadio">
投稿2018/09/10 05:04
総合スコア114825
0
ベストアンサー
取得部分はできているので、あとはvalueプロパティに入れるようにしてください。
JavaScript
1 resultRadio.value = result;
https://developer.mozilla.org/ja/docs/Web/API/HTMLOutputElement
投稿2018/09/10 04:32
総合スコア13749
ありがとうございます！valueプロパティがないだけだったんですね＞＜
まだまだ理解できてないみたいですが、おかげで出力できました！ありがとうございます！
resultRadioが唐突に出てきているため、正しくは
document.getElementsById(’resultRadio’).value = result; では？
idは出てきているので動くのですが、そのほうが安全でしょうね
https://html.spec.whatwg.org/#named-access-on-the-window-object
念のため補足しておくと、output要素にtype属性はない(プロパティはある)ので書かないでください。
ラジオボタンの値はformがあればループせずに簡単に取得できます。
あなたの回答
tips
プレビュー
