2018年11月12日月曜日

Web:JS:一つしかないラジオボタンの状態を拾う方法

ラジオボタンが複数ある場合(フツーの状態)

<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 ) ;
}
(こちらのサイトのコードをお借りした)

しかし、ラジオボタンが一つしかないとき、この方法は使えない。クリックされていない状態でも value が返ってくる(複数あって一つも選択されていないときは value が "" となる)。

ラジオボタンの数が可変で一つのこともある場合は、一つの場合だけ処理を分け、value ではなく、checked (選択されていると true) で拾うのが吉。

上記ソースだと、ラジオボタンが一個の場合は

// 選択状態の値(true)を取得
// value は最初から input 要素の value 属性が設定されている
var a = radioNodeList.checked ;

if ( a === false ) {
 // 未選択状態
} else {
 // 選択状態
}



0 件のコメント:

コメントを投稿