JavaScript ラジオボタンの値を取得/設定するサンプル

JavaScriptのラジオボタンの値を取得/設定するサンプルです。

確認環境
・Windows10
・Google Chrome/IE11

目次

radioボタンが複数 value値を取得する(formとnameを使用)
  value値を取得する(getElementsByNameメソッドを使用)
  チェックをつける
  チェックを外す
radioボタン1つ チェックされたか真偽値で確認する(formとnameを使用)
  チェックされたか真偽値で確認する(getElementsByIdを使用)
イベントハンドラ チェックされたらvalue値を取得する(onchangeを使用)

value値を取得する(formとnameを使用)

ボタンを押した時、チェックされた項目のvalue値を取得して表示します。

選択した色

黄 

コード

上記サンプルのコードです。

<p>選択した色 <span id="span1"></span></p>
<form name="form1">
	<input type="radio" name="color1" value="red" checked> 赤
	<input type="radio" name="color1" value="blue" > 青
	<input type="radio" name="color1" value="yellow" > 黄
</form>
<input type="button" value="ボタン" onclick="clickBtn1()"/>

<script>
function clickBtn1(){
	let str = "";
	const color1 = document.form1.color1;

	for (let i = 0; i < color1.length; i++){
		if(color1[i].checked){ //(color1[i].checked === true)と同じ
			str = color1[i].value;
			break;
		}
	}
	document.getElementById("span1").textContent = str;
}
</script>

3~5行目は、ラジオボタンです。
12行目は、フォームのname「form1」とラジオボタンのname「color1」で対象を特定(3~5行目)しています。
14行目は、ラジオボタンの数を取得してループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
15行目は、ラジオボタンのチェックがついていた場合、if文のcheckedの判定がtrueになります。
16行目は、ラジオボタンのvalue値(red,blue,yellow)を変数にセットしています。

value値を取得する(getElementsByNameメソッドを使用)

ボタンを押した時、チェックされた項目のvalue値を取得して表示します。
getElementsByNameメソッドを使用します。フォーム(form)がなくても取得できます。

選択した色

黄 

コード

上記サンプルのコードです。

<p>選択した色 <span id="span2"></span></p>
<input type="radio" name="color2" value="red" checked> 赤
<input type="radio" name="color2" value="blue" > 青
<input type="radio" name="color2" value="yellow" > 黄
<input type="button" value="ボタン" onclick="clickBtn2()"/>

<script>
function clickBtn2(){
	let str = "";
	const color2 = document.getElementsByName("color2");

	for (let i = 0; i < color2.length; i++){
		if(color2[i].checked){ //(color2[i].checked === true)と同じ
			str = color2[i].value;
			break;
		}
	}
	document.getElementById("span2").textContent = str;
}
</script>

2~4行目は、ラジオボタンです。
10行目は、getElementsByNameメソッドでラジオボタンのname「color2」を特定(2~4行目)しています。
12行目は、ラジオボタンの数を取得してループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
13行目は、ラジオボタンのチェックがついていた場合、if文のcheckedの判定がtrueになります。
14行目は、ラジオボタンのvalue値(red,blue,yellow)を変数にセットしています。

チェックをつける

チェックをつけるサンプルです。
ボタンを押すとラジオボタンの青にチェックが入ります。

黄 

コード

上記サンプルのコードです。

<form name="form3">
	<input type="radio" name="color3" value="red" checked> 赤
	<input type="radio" name="color3" value="blue" > 青
	<input type="radio" name="color3" value="yellow" > 黄
</form>
<input type="button" value="ボタン" onclick="clickBtn3()"/>

<script>
function clickBtn3(){
	const color3 = document.form3.color3;

	color3[2].checked = true;

}
</script>

2~4行目は、ラジオボタンです。
10行目は、フォームのname「form3」とラジオボタンのname「color3」で対象を特定(2-4行目)しています。
12行目は、checkedにtrueを設定しています。

チェックを外す

ラジオボタンのチェックを外すサンプルです。
ボタンを押すとチェックが外れます。

黄 

コード

上記サンプルのコードです。

<form name="form4">
	<input type="radio" name="color4" value="red" checked> 赤
	<input type="radio" name="color4" value="blue" > 青
	<input type="radio" name="color4" value="yellow" > 黄
</form>
<input type="button" value="ボタン" onclick="clickBtn4()"/>

<script>
function clickBtn4(){
	const color4 = document.form4.color4;

	for (let i = 0; i < color4.length; i++){
		color4[i].checked = false;
	}
}
</script>

2~4行目は、ラジオボタンです。
10行目は、フォームのname「form3」とラジオボタンのname「color3」で対象を特定(2-4行目)しています。
12行目は、ラジオボタンの数分ループを回しています。ループはfor-of文でも可です(IE11はfor-of文に対応していなので不可)。
13行目は、各項目に対してcheckedをfalseにしてチェックを外しています。

チェックされたか真偽値で確認する(formとnameを使用)

ボタンを押した時、ラジオボタンがチェックされていた場合はtrue、チェックがない場合はfalseを表示します。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span5"></span></p>
<form name="form5">
  <input type="radio" name="color5" value="red" checked> 赤
</form>
<input type="button" value="ボタン" onclick="clickBtn5()" />
<input type="button" value="チェックを外す" onclick="clickBtn6()" />

<script>
  function clickBtn5() {
    const color1 = document.form5.color5;

    if (color1.checked) { //(color1[i].checked === true)と同じ
      document.getElementById("span5").textContent = "trueです";
    } else {
      document.getElementById("span5").textContent = "falseです";
    }
  }
  function clickBtn6() {
    document.form5.color5.checked = false;
  }
</script>

3行目は、ラジオボタンです。
12行目は、チェックの状態を真偽値で判定します。チェックされていればtrue、チェックされていない場合はfalseを返します。

チェックされたか真偽値で確認する(getElementsByIdを使用)

ボタンを押した時、ラジオボタンがチェックされていた場合はtrue、チェックがない場合はfalseを表示します。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span7"></span></p>
<input type="radio" id="color6" value="red" checked> 赤
<input type="button" value="ボタン" onclick="clickBtn7()" />
<input type="button" value="チェックを外す" onclick="clickBtn8()" />

<script>
  function clickBtn7() {
    const color1 = document.getElementById("color6");

    if (color1.checked) { //(color1[i].checked === true)と同じ
      document.getElementById("span7").textContent = "trueです";
    } else {
      document.getElementById("span7").textContent = "falseです";
    }
  }
  function clickBtn8() {
    document.getElementById("color6").checked = false;
  }
</script>

2行目は、ラジオボタンです。
8行目は、getElementByIdメソッドでラジオボタンを取得しています。
10行目は、ラジオボタンのチェックがついていた場合、if文のcheckedの判定がtrueになります。

チェックされたらvalue値を取得する(onchangeを使用)

ラジオボタンがチェックされたらvalue値を取得して表示します。

選択した色

コード

上記サンプルのコードです。

<p>選択した色 <span id="span8"></span></p>
<form name="form8"></form>
<input type="radio" name="c8" value="red" onchange="chk1(this.value)" checked> 赤
<input type="radio" name="c8" value="blue" onchange="chk1(this.value)" > 青
</form>

<script>
  function chk1(val) {
    document.getElementById("span8").textContent = val;
  }
</script>

3,4行目は、ラジオボタンです。
チェックを入れるとonchangeのイベントハンドラで8行目の関数を実行します。
3行目のthis.valueは、redを指します。8行目に引数として渡します。
4行目のthis.valueは、blueを指します。8行目に引数として渡します。
9行目は、取得したvalue値を画面に表示します。

関連の記事

JavaScript チェックボックスの値を取得/設定するサンプル
JavaScript セレクトボックスの値を取得/設定するサンプル
JavaScript hiddenの値を取得/設定するサンプル
JavaScript テキストボックスの値を取得/設定する
JavaScript テキストエリアの値を取得/設定するサンプル
jQuery ラジオボタンの選択されている値を取得する
JavaScript for...in文とfor...of文のサンプル

△上に戻る