dom_dom0600_003

同一グループのラジオボタンから選択された要素を1つ取得するには、document.querySelector(‘input[ ( A ) =”gender”]:( B )’) のように、name属性と擬似クラスを組み合わせて指定する。

解答

A: name
B: checked

解説

ラジオは同じ name を共有します。選択済みのものは :checked で特定できます。querySelector(‘input[name=”gender”]:checked’) で選択中の1件を取得できます。

使用例(サンプルコード)

[ html ]

<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<script>
  const picked = document.querySelector('input[name="gender"]:checked');
  console.log(picked?.value); // 選択があれば "male" など
</script>