ラジオボタンの選択状態を取得・変更する

ラジオボタンの選択状態を取得する

フォームにあるラジオボタンの選択状態を取得するときはcheckedプロパティを参照します。
checkedプロパティの値は選択状態のときはtrue、選択されていないときはfalseが入っています。

今回は解説用に以下のHTMLコードを使います。
赤字のHTML要素がラジオボタンのHTMLです。

HTMLコード例

<form method="post" action="">
  <label for="gender_male"><input type="radio" id="gender_male" name="gender" value="男性">男性</label>
  <label for="gender_female"><input type="radio" id="gender_female" name="gender" value="女性">女性</label>
  <label for="gender_noanswer"><input type="radio" id="gender_noanswer" name="gender" value="回答しない">回答しない</label>
</form>

ラジオボタンはname属性に同じ値を持つinput要素が複数あるケースが多いです。
上記のHTMLでは「name=gender」が3つあります。

そこで以下の例では、querySelectorAllメソッドを使って同じname属性を持つ全てのinput要素を取得してから、for…in文でループして選択状態を確認していきます。

コード例

window.addEventListener('DOMContentLoaded', function(){

	// 「name=gender」を持つ全てのラジオボタンを取得
	let input_genders = document.querySelectorAll("input[name=gender]");

	for(let element of input_genders) {

		element.addEventListener('change',function(){
			if( this.checked ) {
				console.log(this.value);
			}
		});
	}

});

1行目はページ読み込み時に実行するイベントリスナーを登録しています。
その中で、まずはquerySelectorAllメソッドで指定したname属性を持つ全てのラジオボタンを取得します。
取得結果は配列形式で変数input_gendersに入ります。

続いて、for…in文でループ処理を行います。
変数input_gendersに入っている要素の数だけループするため、ここでは取得したラジオボタンの数だけループすることになります。

ループ処理の中ではラジオボタン1つ1つに対してイベントリスナー「change」を登録していきます。
全てのラジオボタンに登録することで、いずれかのラジオボタンが選択（クリック）されたタイミングで選択状態を確認することができます。

最後に、if文の条件式からcheckedプロパティを参照し、選択状態のtrueのときはそのラジオボタンのvalue属性にある値を出力します。

ラジオボタンは同じname属性の中から１つしか選択できないため、次のように擬似セレクター「:checked」を使って選択されたラジオボタンのみ取得することも可能です。

コード例

let input_gender = document.querySelector("input[name=gender]:checked");

if( input_gender ) {
	console.log(input_gender.value);
}

ラジオボタンの選択状態を変更する

選択状態を変更するときはcheckedプロパティに値を代入することで可能です。
選択状態にするときはtrueを入れ、選択解除するときはfalseを入れます。

以下の例はページが読み込まれたタイミングで全てのラジオボタンの選択状態を解除します。

コード例

window.addEventListener('DOMContentLoaded', function(){

	let input_genders = document.querySelectorAll("input[name=gender]");

	for(let element of input_genders) {
		element.checked = false;
	}
});

上記の選択状態を取得するコードと大体の部分は共通です。

ページが読み込まれたタイミングでquerySelectorAllメソッドを実行して「name=gender」のラジオボタンを全て取得します。
変数input_gendersには配列形式で取得したHTML要素が入るため、for…in文を使ってHTML要素の数だけループ処理を繰り返します。

その後、ループ処理の中で全てのラジオボタンのcheckedプロパティにfalseを代入して選択解除を行います。

ここで反対に選択状態にするtrueを設定することも可能ですが、ラジオボタンは同じname属性は1つしか選択できないため最後のラジオボタンだけが選択された状態になります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。