JavaScript で選択されたラジオボタンの値を取得する方法

2024-05-09

JavaScript で選択されたラジオボタンの値を取得する方法

HTMLフォームでラジオボタンを使用する場合、ユーザーが選択したオプションの値を取得することが重要です。これは、フォームデータを処理したり、ユーザーの選択に基づいてダイナミックな動作をしたりするために役立ちます。

必要なもの

このチュートリアルで使用するもの：

  • HTML ファイル (index.html)
  • JavaScript ファイル (script.js)

手順

  1. HTML を作成する

以下は、3 つのオプションを持つラジオボタングループを含む HTML ファイルの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ラジオボタンの値を取得</title>
</head>
<body>
    <h1>ラジオボタンの値を取得</h1>
    <form id="myForm">
        <label for="option1">オプション 1</label>
        <input type="radio" id="option1" name="choice" value="option1">
        <br>
        <label for="option2">オプション 2</label>
        <input type="radio" id="option2" name="choice" value="option2">
        <br>
        <label for="option3">オプション 3</label>
        <input type="radio" id="option3" name="choice" value="option3">
        <br>
        <br>
        <button type="button" onclick="getSelectedRadioButtonValue()">選択値を取得</button>
    </form>
    <p id="selectedValue"></p>

    <script src="script.js"></script>
</body>
</html>
  1. JavaScript を作成する

以下は、選択されたラジオボタンの値を取得する JavaScript コードです。

function getSelectedRadioButtonValue() {
    const form = document.getElementById('myForm');
    const radioButton = form.querySelector('input[name="choice"]:checked');

    if (radioButton) {
        const selectedValue = radioButton.value;
        document.getElementById('selectedValue').textContent = `選択された値: ${selectedValue}`;
    } else {
        document.getElementById('selectedValue').textContent = '選択された値はありません。';
    }
}

このコードは次の処理を実行します。

  1. document.getElementById('myForm') を使用してフォーム要素を取得します。
  2. form.querySelector('input[name="choice"]:checked') を使用して、choice という名前を持ち、選択されているラジオボタン要素を取得します。
  3. ラジオボタン要素が存在する場合、radioButton.value を使用して選択された値を取得し、document.getElementById('selectedValue') のテキストコンテンツを更新して値を表示します。
  4. ラジオボタン要素が存在しない場合、document.getElementById('selectedValue') のテキストコンテンツを更新して、選択されていないことを示すメッセージを表示します。

実行方法

  1. 上記の HTML と JavaScript コードをそれぞれ index.html と script.js というファイルに保存します。
  2. Web ブラウザで index.html ファイルを開きます。
  3. ラジオボタンオプションのいずれかをクリックします。
  4. 「選択値を取得」ボタンをクリックすると、選択されたラジオボタンの値がページに表示されます。

for ループの使用

ラジオボタンが多数ある場合、for ループを使用して効率的に選択された値を取得できます。

function getSelectedRadioButtonValue() {
    const radios = document.querySelectorAll('input[name="choice"]');
    for (const radio of radios) {
        if (radio.checked) {
            return radio.value;
        }
    }
    return null;
}

このコードは、document.querySelectorAll('input[name="choice"]') を使用して、choice という名前を持つすべてのラジオボタン要素を取得します。次に、for ループを使用して各ラジオボタン要素を反復処理し、checked プロパティを使用して選択されているかどうかを確認します。選択されているラジオボタンが見つかったら、その value プロパティを返します。選択されているラジオボタンが見つからない場合は、null を返します。

このチュートリアルでは、JavaScript で選択されたラジオボタンの値を取得する方法を 2 通り説明しました。単純なフォームの場合は最初の方法で十分ですが、ラジオボタンが多数ある場合は for ループを使用する方が効率的です。



以下は、index.html と script.js ファイルの完全な例です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ラジオボタンの値を取得</title>
</head>
<body>
    <h1>ラジオボタンの値を取得</h1>
    <form id="myForm">
        <label for="option1">オプション 1</label>
        <input type="radio" id="option1" name="choice" value="option1">
        <br>
        <label for="option2">オプション 2</label>
        <input type="radio" id="option2" name="choice" value="option2">
        <br>
        <label for="option3">オプション 3</label>
        <input type="radio" id="option3" name="choice" value="option3">
        <br>
        <br>
        <button type="button" onclick="getSelectedRadioButtonValue()">選択値を取得</button>
    </form>
    <p id="selectedValue"></p>

    <script src="script.js"></script>
</body>
</html>

script.js

function getSelectedRadioButtonValue() {
    const form = document.getElementById('myForm');
    const radioButton = form.querySelector('input[name="choice"]:checked');

    if (radioButton) {
        const selectedValue = radioButton.value;
        document.getElementById('selectedValue').textContent = `選択された値: ${selectedValue}`;
    } else {
        document.getElementById('selectedValue').textContent = '選択された値はありません。';
    }
}

このコードを index.html と script.js というファイルに保存し、Web ブラウザで index.html ファイルを開くと、ラジオボタンオプションのいずれかをクリックして「選択値を取得」ボタンをクリックすると、選択されたラジオボタンの値がページに表示されます。

説明

  • HTML:
    • この HTML コードは、3 つのオプションを持つラジオボタングループを含むフォームを作成します。
    • 各ラジオボタンには、name 属性と value 属性が設定されています。
    • name 属性は、ラジオボタンが属するグループを識別するために使用されます。
    • value 属性は、ラジオボタンが選択された場合に送信される値を指定します。
    • フォームには、選択された値を取得するためのボタンもあります。
  • JavaScript:
    • getSelectedRadioButtonValue 関数は、選択されたラジオボタンの値を取得します。
    • この関数はまず、フォーム要素を取得します。
    • 次に、querySelector メソッドを使用して、choice という名前を持ち、選択されているラジオボタン要素を取得します。
    • ラジオボタン要素が存在する場合、value プロパティを使用して選択された値を取得し、textContent プロパティを使用してページに表示します。
    • ラジオボタン要素が存在しない場合、ページにメッセージが表示されます。

このコードは、JavaScript で選択されたラジオボタンの値を取得する方法を示す基本的な例です。ニーズに合わせてコードを自由にカスタマイズできます。



ラジオボタンの選択値を取得するその他の方法

前述の方法に加えて、JavaScript で選択されたラジオボタンの値を取得する方法は他にもいくつかあります。以下に、いくつかの例を紹介します。

document.getElementsByName を使用する

この方法は、名前でラジオボタンのグループを取得し、その後、checked プロパティを使用して選択されたラジオボタンを特定します。

function getSelectedRadioButtonValue() {
  const radios = document.getElementsByName('choice');
  for (const radio of radios) {
    if (radio.checked) {
      return radio.value;
    }
  }
  return null;
}

ラベルの for 属性を使用する

この方法は、各ラジオボタンラベルの for 属性の値を使用して、対応するラジオボタン要素を取得します。

function getSelectedRadioButtonValue() {
  const labels = document.querySelectorAll('label');
  for (const label of labels) {
    if (label.getAttribute('for') === 'option1' && label.nextElementSibling.checked) {
      return 'option1';
    } else if (label.getAttribute('for') === 'option2' && label.nextElementSibling.checked) {
      return 'option2';
    } else if (label.getAttribute('for') === 'option3' && label.nextElementSibling.checked) {
      return 'option3';
    }
  }
  return null;
}

カスタムデータ属性を使用する

この方法は、各ラジオボタン要素にカスタムデータ属性を追加し、その属性に選択された値を格納します。

<input type="radio" id="option1" name="choice" value="option1" data-selected-value="オプション 1">
<input type="radio" id="option2" name="choice" value="option2" data-selected-value="オプション 2">
<input type="radio" id="option3" name="choice" value="option3" data-selected-value="オプション 3">

function getSelectedRadioButtonValue() {
  const radioButton = document.querySelector('input[name="choice"]:checked');
  if (radioButton) {
    return radioButton.dataset.selectedValue;
  }
  return null;
}
  • 単純なフォーム の場合は、最初の方法が最も簡単です。
  • ラジオボタンが多数ある 場合は、for ループを使用する方が効率的です。
  • 選択された値にカスタム表示が必要 な場合は、カスタムデータ属性を使用すると便利です。

どの方法を選択する場合でも、コードがわかりやすく、読みやすいことを確認してください。


javascript html for-loop

jQuery animate()メソッドを使いこなして、ワンランク上のアニメーションを実現

jQueryライブラリHTMLファイルJavaScriptファイル以下のコードは、要素の背景色を徐々に赤から青に変えるアニメーションを作成します。このコードは、以下の2つのアニメーションを実行します。最初の1秒間、要素の背景色は徐々に赤から青に変遷します。...

 
javascript jquery colors jQuery animate()メソッドを使いこなして、ワンランク上のアニメーションを実現

ウェブスクレイピング対策：HTML、Webスクレイピング、アーキテクチャ

幸運なことに、ウェブサイトをスクレイパーから守るためにできることがいくつかあります。以下に、一般的な対策と、それぞれの長所と短所を詳しく説明します。robots. txt ファイルは、検索エンジンやスクレイパーにどのページにアクセスしてインデックス作成できるかを指示するために使用される標準プロトコルです。robots...

 
html web scraping architecture ウェブスクレイピング対策：HTML、Webスクレイピング、アーキテクチャ

jQueryでエレガントにクラス操作！addClass、removeClass、toggleClassを使いこなすテクニック

このガイドでは、**addClass()とremoveClass()**メソッドを使用して、jQueryで複数のクラスを操作する方法について説明します。**addClass()**メソッドを使用して、要素に複数のクラスを同時に追加することができます。...

 
javascript jquery jQueryでエレガントにクラス操作！addClass、removeClass、toggleClassを使いこなすテクニック

JavaScript: テンプレートリテラルを使って文字列を削除する方法

概要replace() メソッドは、文字列内の特定の部分を別の文字列に置き換えるために使用されます。削除したい文字列を空文字 ("") に置き換えることで、削除することができます。例利点シンプルで使いやすい任意の文字列を削除できる正規表現を使って、複雑なパターンも削除できる...

 
javascript string JavaScript: テンプレートリテラルを使って文字列を削除する方法

JavaScriptとReactで直面する「Reactコンポーネントが状態変更で再レンダリングされない問題」：解決策と回避策

この問題には、主に以下の3つの原因が考えられます。状態の参照渡し: setState メソッドでオブジェクトを直接更新する場合、Reactはオブジェクトが同じであるとみなして再レンダリングをスキップしてしまう可能性があります。不要な再レンダリング: すべてのコンポーネントが毎回再レンダリングされると、パフォーマンスが低下します。...

 
javascript reactjs JavaScriptとReactで直面する「Reactコンポーネントが状態変更で再レンダリングされない問題」：解決策と回避策

SQL SQL SQL SQL Amazon で見る


【初心者向け】JavaScriptでラジオボタンのvalue値を取得する方法を徹底解説
【初心者向け】JavaScriptでラジオボタンのvalue値を取得する方法を徹底解説

JavaScript解説上記3つの方法は、それぞれ異なる方法で選択されたラジオボタンの値を取得します。document. querySelector()を使って、name属性がcolorで、checked属性がtrueのラジオボタンを取得します。