Radioボタンは複数の選択肢から選ぶためのものです。

<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性

上記コードで下記のように出力されます。

男性 女性

※ここではコードをシンプルにするためにLABEL要素は省略しています。

JavaScriptからアクセスする場合、getElementsByName()でName属性の値を指定します。上記コードでしたら、Name属性のgenderを引数に指定します。

var elm_form = document.getElementsByName("gender");

elm_formにはName属性がgenderのRadioボタンの配列が代入されます。for文を使って、この配列のすべての要素にアクセスしてみましょう。

for (var i = 0; i < elm_form.length; i++) {
	console.log(elm_form[i]);
}

配列の各要素にはRadioボタンのオブジェクトが代入されているので、出力結果は以下になります。

出力結果

<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

クラス名を使えばquerySelector()を使っても同じ結果を得られます。先程のHTMLコードにクラス名を追加してみましょう。

<input type="radio" name="gender" value="male" class="f-gender">男性
<input type="radio" name="gender" value="female" class="f-gender">女性

JavaScriptは次のようになります。

var elm_form = document.querySelector(".f-gender");

elm_formにはgetElementsByName()と同じ結果が代入されます。