ラジオボタンの値をセットする方法

2017/07/30

ラジオボタンを選択状態にするにはcheckedプロパティにtrueを、選択状態を外すにはfalseを代入します。

サンプルコード

単一

1つの要素を指定する場合です。

<input id="target" type="radio">

// 要素を取得
var element = document.getElementById( "target" ) ;

// 選択状態にする
element.checked = true ;

// 選択状態を外す
element.checked = false ;

グループ

ラジオボタンのグループのどれが選択状態かを確認する方法です。

form要素内

form要素内のラジオボタンのグループだったら、form要素を起点として要素を取得すると何かと手軽です。一般的なブラウザならRadioNodeList、Ie、EdgeならHTMLCollectionという、配列に似た要素の集合を取得できます。ここでは、HTMLCollection、RadioNodeListの扱いに違いはありません。

<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 elements = element.hoge ;

// 2つ目の要素を選択状態にする
elements[1].checked = true ;

// 2つ目の要素の選択状態を外す
elements[1].checked = false ;

form要素外

form要素内にないラジオボタンのグループの場合は、getElementsByName()やgetElementsByClassName()などを利用してHTMLCollectionを取得し、インデックス番号で要素を指定するのが定番でしょう。

<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" ) ;

// 3つ目の要素を選択状態にする
elements[2].checked = true ;

// 3つ目の要素の選択状態を外す
elements[2].checked = false ;

デモ

コードを編集して挙動を確かめてみて下さい。

単一

// <input id="target" type="radio">
var element = document.getElementById( "target" ) ;

element.checked = true ;

ラジオボタン

グループ

form要素内

// <form id="target">
// 	<input name="hoge" type="radio" value="A">
// 	...
// </form>
var element = document.getElementById( "target" ) ;

var elements = element.hoge ;

elements[0].checked = true ;

form要素外

// 	<input name="hoge" type="radio" value="A">
// 	...
var elements = document.getElementsByName( "hoge" ) ;

elements[0].checked = true ;

サンプルコード

単一

グループ

form要素内

form要素外

デモ

単一

グループ

form要素内

form要素外

関連記事