【現役プログラマーが解説】HTMLでラジオボタンでchecked属性の選択値を取得する方法

本記事は、「ラジオボタンの初期値を設定してもcheckedが効かない…」と思いつつ

UIHACK 編集長

・基本的なラジオボタンの作成方法と構造が実はわかっていない
・ラジオボタンの選択状態がうまく制御できない…
・ラジオボタンの選択値を取得できない問題に直面している…

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、「前半」では「ラジオボタンの作成方法と基本的な構造」を「後半」では応用編で「JavaScriptを使ってラジオボタンにチェックを入れる方法」を詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

HTMLで実装するラジオボタンの作成方法と基本構造

HTMLでラジオボタンを作成する方法は、要素のtype属性を“radio”に設定することで実現します。ラジオボタンは、複数の選択肢から1つだけを選択する際に使用されます。

以下がラジオボタンの基本的な構造です。

<label>
  <input type="radio" name="option" value="option1"> 選択肢1
</label>

<label>
  <input type="radio" name="option" value="option2"> 選択肢2
</label>

<label>
  <input type="radio" name="option" value="option3"> 選択肢3
</label>

ラジオボタンの実行結果

UIHACK 編集長

解説

・<input>要素にtype=“radio”を設定すると、ラジオボタンが作成されます。
・name属性は、ラジオボタンが同じグループ内で互いに関連付けられるための識別子です。同じname属性を持つラジオボタンは、グループ内で1つだけが選択できます。
・value属性は、ラジオボタンが選択された際に送信される値を指定します。

ラジオボタンにchecked属性を設定する

ラジオボタンは複数の選択肢から1つだけを選ぶときに使います。checked属性は、最初にどの選択肢を選んでおくかを決めるための特別な指示です。この属性を使うことで、フォームを開いたときに最初から何かが選ばれている状態にすることができます。

ラジオボタンの送信値をchecked属性で指定する方法

ラジオボタンの送信値をchecked属性で指定する方法は、checked属性を持つラジオボタンが選択されると、そのvalue属性の値がフォームの送信時にサーバーに送信されるという仕組みを利用します。

UIHACK 編集長

以下は具体的な実装例です。

<form action="submit.php" method="post">
  <label>
    <input type="radio" name="gender" value="male" checked> 男性
  </label>

  <label>
    <input type="radio" name="gender" value="female"> 女性
  </label>

  <button type="submit">送信</button>
</form>

ラジオボタンにchecked属性を追加した際の実行結果

UIHACK 編集長

解説

上記の例では、2つのラジオボタンがあります。初期状態で「男性」が選択されているようにchecked属性が設定されています。この場合、フォームの送信時に「男性」という値がサーバーに送信されます。

もし「女性」を初期状態にしたい場合は、checked属性を変更します。

<form action="submit.php" method="post">
  <label>
    <input type="radio" name="gender" value="male"> 男性
  </label>

  <label>
    <input type="radio" name="gender" value="female" checked> 女性
  </label>

  <button type="submit">送信</button>
</form>

ラジオボタンの「女性」にchecked属性を追加した際の実行結果

required属性でラジオボタンの選択を必須にする方法

required属性を使用することで、ラジオボタンを必須入力項目にすることができます。ユーザーがラジオボタンを選択せずにフォームを送信しようとした場合、ブラウザは入力が不足していると判断し、フォームの送信を阻止します。

<form action="submit.php" method="post">
  <label>
    <input type="radio" name="gender" value="male" required> 男性
  </label>

  <label>
    <input type="radio" name="gender" value="female" required> 女性
  </label>

  <button type="submit">送信</button>
</form>

required属性の実行結果

UIHACK 編集長

解説

上記の例では、2つのラジオボタンがあります。両方のラジオボタンにrequired属性が設定されているため、ユーザーは1つの選択肢を必ず選択しなければフォームを送信できません。ユーザーがラジオボタンを選択せずに送信しようとした場合、ブラウザはエラーメッセージを表示し、選択を求めるよう促します。

JavaScriptでラジオボタンの値を「変更」と「取得」する方法

JavaScriptを使ってラジオボタンの値を「変更」と「取得」する方法を以下に説明します。

ラジオボタンを選択ずみ（checked）にする方法

ラジオボタンの値を変更するには、対象のラジオボタンにアクセスしてcheckedプロパティを設定します。

完成デモ

<form>
  <input type="radio" name="fruit" value="apple" id="appleRadio">
  <label for="appleRadio">りんご</label>

  <input type="radio" name="fruit" value="banana" id="bananaRadio">
  <label for="bananaRadio">バナナ</label>

  <input type="radio" name="fruit" value="orange" id="orangeRadio">
  <label for="orangeRadio">オレンジ</label>
</form>

// ラジオボタンの値を変更する例
document.getElementById("bananaRadio").checked = true;

UIHACK 編集長

解説

上記の例では、idが“bananaRadio”のラジオボタンをJavaScriptでチェック（選択）状態にしています。

ラジオボタンで選択ずみの（checked）状態を取得する方法

ラジオボタンの値を取得するには、選択されているラジオボタンを特定し、そのvalue属性の値を取得します。

完成デモ

<form>
  <input type="radio" name="fruit" value="apple" id="appleRadio">
  <label for="appleRadio">りんご</label>

  <input type="radio" name="fruit" value="banana" id="bananaRadio">
  <label for="bananaRadio">バナナ</label>

  <input type="radio" name="fruit" value="orange" id="orangeRadio">
  <label for="orangeRadio">オレンジ</label>

  <button type="button" onclick="getSelectedFruit()">選択されたフルーツを取得</button>
</form>

// ラジオボタンの値を取得する例
  function getSelectedFruit() {
    const radioButtons = document.getElementsByName("fruit");
    let selectedValue = "";
  
    for (const radioButton of radioButtons) {
      if (radioButton.checked) {
        selectedValue = radioButton.value;
        break;
      }
    }

    console.log("選択されたフルーツは：" + selectedValue);
  }

UIHACK 編集長

解説

この例では、console.log()メソッドを使用して選択されたフルーツの値をコンソールに出力します。ブラウザの開発者ツールのコンソールを開いている場合、そこに値が表示されます。

選択ずみのラジオボタンのテキストを取得する実装方法

完成デモ

<form>
  <input type="radio" name="fruit" value="apple" id="appleRadio" checked>
  <label for="appleRadio">りんご</label>

  <input type="radio" name="fruit" value="banana" id="bananaRadio">
  <label for="bananaRadio">バナナ</label>

  <input type="radio" name="fruit" value="orange" id="orangeRadio">
  <label for="orangeRadio">オレンジ</label>
</form>

function getSelectedRadioButtonText() {
  const radioButtons = document.getElementsByName("fruit");
  let selectedText = "";

  for (const radioButton of radioButtons) {
    if (radioButton.checked) {
      selectedText = document.querySelector(`label[for="${radioButton.id}"]`)
        .textContent;
      break;
    }
  }

  return selectedText;
}

const selectedFruitText = getSelectedRadioButtonText();
console.log("選択されたフルーツのテキストは：" + selectedFruitText);

UIHACK 編集長

解説

このJavaScriptコードでは、getSelectedRadioButtonText()関数が呼び出されたときに選択ずみのラジオボタンのテキストを取得します。

for…ofループを使用して選択ずみのラジオボタンを見つけ、そのラジオボタンのidを使用してラベル要素を取得し、そのテキストを取得しています。

この例では、選択ずみのラジオボタンが“りんご”の場合、コンソールに「選択されたフルーツのテキストは：りんご」と出力されます。

<!-- ラジオボタンの例 -->
<input type="radio" name="gender" value="male" id="maleRadio"> <label for="maleRadio">男性</label>
<input type="radio" name="gender" value="female" id="femaleRadio"> <label for="femaleRadio">女性</label>

<!-- チェックボックスの例 -->
<input type="checkbox" name="interest" value="music" id="musicCheckbox"> <label for="musicCheckbox">音楽</label>
<input type="checkbox" name="interest" value="sports" id="sportsCheckbox"> <label for="sportsCheckbox">スポーツ</label>

checked属性の選択値を取得する方法の結論とまとめ

UIHACK 編集長

今回は、ラジオボタンの作成方法とJavaScriptでラジオボタンの値を「変更」と「取得」する方法についてご紹介しました。それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「HTMLで実装するラジオボタンの作成方法と基本的な構造」を読む↑

HTMLで日付・カレンダー作成方法も学びたい方はぜひ以下の記事もご覧ください。

2023年7月24日 【コピペ】はじめてのinput type=’month’の使い方！日付・カレンダー作成時のコツも解説

JavaScript関数の意味や使い方がよくわからない方は、次の記事もあわせて参照ください。

2023年7月20日 【再利用】JavaScript関数(function)と引数の使い方！