SYNCERのロゴ
アイキャッチ画像

ラジオボタンの値を取得する方法

どのラジオボタンが選択状態かを確認するには、要素の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 =

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年7月30日 (日)
コンテンツを公開しました。