ラジオボタンの値を取得する方法
どのラジオボタンが選択状態かを確認するには、要素のcheckedプロパティを参照します。
サンプルコード
いくつかのケースがあるので使い分けて下さい。
単一
まずは基本です。要素そのものを指定して、その要素が選択状態か否かを確認するケースです。checkedプロパティの値は、選択状態だとtrue、違うとfalseになります。
<input id="target" type="radio">
var element = document.getElementById( "target" ) ;
if ( element.checked ) {
// チェックされている
} else {
// チェックされていない
}
グループ
ラジオボタンのグループのどれが選択状態かを確認する方法です。
form要素内
form要素内にあるなら、RadioNodeListを利用するのがお手軽です。下記のコードを見て下さい。例えば、Bが選択状態の場合は、変数のaには"b"
が代入されます。未選択状態の場合は空の文字列です。なお、2017年8月現在、EdgeとIeは非対応です。対応する場合は次項の方法をご利用下さい。
<form id="target">
<input name="hoge" type="radio" value="a"> A
<input name="hoge" type="radio" value="b"> B
<input name="hoge" type="radio" value="c"> C
</form>
// form要素を取得
var element = document.getElementById( "target" ) ;
// form要素内のラジオボタングループ(name="hoge")を取得
var radioNodeList = element.hoge ;
// 選択状態の値(value)を取得 (Bが選択状態なら"b"が返る)
var a = radioNodeList.value ;
if ( a === "" ) {
// 未選択状態
} else {
// aには選択状態の値が代入されている
console.log( a ) ;
}
form要素外
form要素内にないラジオボタンの場合、RadioNodeListを利用しない場合は面倒ですが各要素のcheckedプロパティをいちいち確認して選択状態の要素を判定しましょう。未選択の場合は空の文字列になるようにしています。
<input name="hoge" type="radio" value="a"> A
<input name="hoge" type="radio" value="b"> B
<input name="hoge" type="radio" value="c"> C
// 要素を取得
var elements = document.getElementsByName( "hoge" ) ;
// 選択状態の値を取得
for ( var a="", i=elements.length; i--; ) {
if ( elements[i].checked ) {
var a = elements[i].value ;
break ;
}
}
if ( a === "" ) {
// 未選択状態
} else {
// aには選択状態の値が代入されている
console.log( a ) ;
}
デモ
単一
// <input id="target" type="radio">
var element = document.getElementById( "target" ) ;
if ( element.checked ) {
var a = "チェックされています。" ;
} else {
var a = "チェックされていません。" ;
}
a =
グループ
form要素内
// <form id="target">
// <input name="hoge" type="radio" value="A">
// ...
// </form>
var element = document.getElementById( "target" ) ;
var radioNodeList = element.hoge ;
var a = radioNodeList.value ;
a =
form要素外
// <input name="hoge" type="radio" value="A">
// ...
var elements = document.getElementsByName( "hoge" ) ;
// 選択状態の値を取得
for ( var a="", i=elements.length; i--; ) {
if ( elements[i].checked ) {
var a = elements[i].value ;
break ;
}
}
a =
関連記事
- ラジオボタンの値をセットする方法
- ラジオボタンを選択状態にするには、要素のcheckedプロパティにtrueを代入します。
- 小数を四捨五入、切り捨て、切り上げする方法
- 小数の切り捨て、切り上げ、四捨五入をします。また、小数点第n位までの数値を出します。
- 指定文字を置換、削除する方法
- 文字列の中の指定した部分を置換したり削除します。
- 選択フォームの値を取得する方法
- 選択フォームのどの項目が選択状態かを取得するには、要素のselectedプロパティを確認します。
- 選択フォームの値をセットする方法
- 選択フォームの項目を選択状態にするには、要素のselectedプロパティにtrueを指定します。