JavaScript で選択したラジオボタンの値を取得する

1. JavaScript で document.querySelector() を使用してラジオの要素の値を取得する
2. JavaScript の getElementsByName() でラジオの要素の値を取得する

ラジオボタンは、ユーザーが任意のオプションを選択できるさまざまなオプションを指定する HTML 入力要素です。この記事では、この HTML 要素の値を JavaScript に取り込む方法を学習します。

JavaScript で document.querySelector() を使用してラジオの要素の値を取得する

これは JavaScript によって提供される基本的な document テクニックであり、selector が目的の selector と一致する Objects / NodeList 部分を返します。querySelector() と querySelectorAll() の唯一の違いは、単一の一致するアイテムオブジェクトが最初に返され、次に一致するアイテムのすべてのオブジェクトが返されることです。無効な selector が渡されると、SyntaxError が返されます。

構文：

document.querySelector($selector);

selector は、クラスの一致条件または識別子を指定する必須パラメーターです。この文字列は、有効な CSS 選択文字列である必要があります。DOM の selector 条件を満たす最初に一致する要素オブジェクトを返します。

詳細については、querySelector メソッドのドキュメントを参照してください。

コード例：

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female" checked="checked">Female

<button type="button" onclick="console.log(document.querySelector('input[name=gender]:checked').value)">
Click to check
</button>

上記のコードでは、値が Male と Female の 2つの入力要素を定義しています。querySelector() を使用してドキュメントにアクセスすると、name 属性が gender と一致し、checked 属性が true に設定されているすべてのノードが検索されます。これはオブジェクトなので、値を直接抽出できます。一致する要素を複数見つける必要がある場合は、querySelectorAll() を使用して配列を反復処理し、すべての値を出力できます。上記のコードの出力は次のようになります。

出力：

Female

JavaScript の getElementsByName() でラジオの要素の値を取得する

これは JavaScript が提供する基本的な document テクニックであり、name 属性が目的の名前と一致する Objects / NodeList 部分を返します。この NodeList は、インデックスを使用してアクセス可能なノードの配列を表します。このインデックスは、他の配列と同様に 0 で始まります。

構文

document.getElementsByName(name);

name は、一致する必要のある HTML 属性の name を指定する必須パラメーターです。一致する要素が見つかった場合は、一致する DOM 要素のオブジェクトを返します。それ以外の場合は、null を返します。

getElementsByName と querySelectorAll の唯一の違いは、getElementsByName が最初に、指定された名前属性が指定された名前と一致する要素のみを選択することです。対照的に、querySelectorAll は任意のセレクターを使用できるため、柔軟性が大幅に向上します。

詳細については、getElementById メソッドのドキュメントを参照してください。

コード例：

<label for="gender">Gender: </label>
<input type="radio" name="gender" value="Male" checked="checked">Male
<input type="radio" name="gender" value="Female">Female

const radios = document.getElementsByName('gender');

for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    console.log(radios[i].value);
    break;
  }
}

上記のコードでは、値が Male と Female の 2つの入力要素を定義しています。getElementsByName() を使用してドキュメントにアクセスすると、name 属性が name と一致するすべてのノードが検索され、NodeList が返されます。これは配列であるため、[0] を使用して最初に一致する要素を抽出できます。一致するアイテムが複数見つかった場合は、配列を参照してすべての値を出力できます。上記のコードの出力は次のようになります。

出力：

Male