ラジオボタンの値をセットする方法
ラジオボタンを選択状態にするには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 ;
関連記事
- 指定文字を置換、削除する方法
- 文字列の中の指定した部分を置換したり削除します。
- 入力フォームに値をセットする方法
- 入力フォームの値をセットするには、valueに目的の値を代入します。
- ラジオボタンの値を取得する方法
- どのラジオボタンが選択状態かを取得するには、要素のcheckedプロパティを確認します。
- 選択フォームの値をセットする方法
- 選択フォームの項目を選択状態にするには、要素のselectedプロパティにtrueを指定します。