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

2024-04-11

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

<form id="form1">
  <label for="red">赤</label>
  <input type="radio" id="red" name="color" value="red" checked>
  <label for="blue">青</label>
  <input type="radio" id="blue" name="color" value="blue">
  <label for="green">緑</label>
  <input type="radio" id="green" name="color" value="green">
</form>

JavaScript

// 1. document.querySelector()を使う

const selectedRadioButton = document.querySelector('input[name="color"]:checked');
const selectedValue = selectedRadioButton.value;

console.log(selectedValue); // "red"

// 2. forEach()を使う

const radioButtons = document.querySelectorAll('input[name="color"]');

for (const radioButton of radioButtons) {
  if (radioButton.checked) {
    console.log(radioButton.value); // "red"
    break;
  }
}

// 3. document.formsを使う

const form = document.getElementById('form1');
const selectedValue = form.elements['color'].value;

console.log(selectedValue); // "red"

解説

上記3つの方法は、それぞれ異なる方法で選択されたラジオボタンの値を取得します。

document.querySelector()を使って、name属性がcolorで、checked属性がtrueのラジオボタンを取得します。

forEach()を使う

querySelectorAll()を使って、name属性がcolorのすべてのラジオボタンを取得し、forEach()を使ってループ処理します。ループ処理の中で、checked属性がtrueのラジオボタンを見つけたら、その値を出力します。

document.formsを使って、id属性がform1のフォームを取得し、elementsプロパティを使って、name属性がcolorのラジオボタンの値を取得します。

シンプルな方法で選択されたラジオボタンの値を取得したい場合は、document.querySelector()を使う方法がおすすめです。
複数のラジオボタンの値を取得したい場合は、forEach()を使う方法がおすすめです。
フォーム全体を操作したい場合は、document.formsを使う方法がおすすめです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>選択されたラジオボタンの値を取得</title>
</head>
<body>
  <form id="form1">
    <label for="red">赤</label>
    <input type="radio" id="red" name="color" value="red" checked>
    <label for="blue">青</label>
    <input type="radio" id="blue" name="color" value="blue">
    <label for="green">緑</label>
    <input type="radio" id="green" name="color" value="green">
  </form>

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

// 1. document.querySelector()を使う

const selectedRadioButton = document.querySelector('input[name="color"]:checked');
const selectedValue = selectedRadioButton.value;

console.log(selectedValue); // "red"

// 2. forEach()を使う

const radioButtons = document.querySelectorAll('input[name="color"]');

for (const radioButton of radioButtons) {
  if (radioButton.checked) {
    console.log(radioButton.value); // "red"
    break;
  }
}

// 3. document.formsを使う

const form = document.getElementById('form1');
const selectedValue = form.elements['color'].value;

console.log(selectedValue); // "red"

実行方法

上記のHTMLコードとJavaScriptコードをそれぞれ別のファイルに保存します。
HTMLファイルをブラウザで開きます。
JavaScriptファイルの内容をブラウザの開発者ツールで実行します。

出力結果

red
red
red

補足

上記のサンプルコードは、あくまでも基本的な例です。
実際の開発では、状況に合わせてコードを修正する必要があります。

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

getElementsByName()を使う

document.formsを使ってフォームを取得し、getElementsByTagName()を使ってラジオボタンの配列を取得します。その後、forループを使って配列をループ処理し、checked属性がtrueのラジオボタンを見つけたら、その値を出力します。

const form = document.getElementById('form1');
const radioButtons = form.getElementsByTagName('input');

for (const radioButton of radioButtons) {
  if (radioButton.type === 'radio' && radioButton.checked) {
    console.log(radioButton.value); // "red"
    break;
  }
}

jQueryライブラリを使っている場合は、$('input[name="color"]:checked').val()を使って、選択されたラジオボタンの値を取得できます。

$(document).ready(function() {
  const selectedValue = $('input[name="color"]:checked').val();

  console.log(selectedValue); // "red"
});

自作関数を使う

上記の方法を参考に、自作関数を作成して、選択されたラジオボタンの値を取得することもできます。

function getSelectedValue(formName, radioName) {
  const form = document.getElementById(formName);
  const radioButtons = form.getElementsByTagName('input');

  for (const radioButton of radioButtons) {
    if (radioButton.type === 'radio' && radioButton.name === radioName && radioButton.checked) {
      return radioButton.value;
    }
  }

  return null;
}

const selectedValue = getSelectedValue('form1', 'color');

console.log(selectedValue); // "red"