〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

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

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

UIHACK
編集長
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
編集長
UIHACK 編集長

解説

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

まとめ

今回の例では、3つの選択肢(”選択肢1″、”選択肢2″、”選択肢3″)があります。同じname=”option”であるため、これらのラジオボタンは1つだけ選択されます。どれか1つの選択肢を選択したい場合、上記のように要素で囲んで、テキストとラジオボタンを対応付けることが推奨されます。

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

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

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

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

UIHACK
編集長
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
編集長
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属性を追加した際の実行結果



上記の「送信」ボタンをタップしてもサーバーサイドの設定をしていませんのでエラーになります。

まとめ

ラジオボタンは同じname属性を持つものがグループとして扱われ、1つだけが選択される仕組みなので、checked属性が1つだけに指定されることに注意してください。選択されたラジオボタンのvalue属性の値が、フォームの送信時にサーバーに送信される値となります。

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
編集長
UIHACK 編集長

解説

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

まとめ

この方法を使うと、ラジオボタンの選択を必須にして、入力漏れを防止することができます。必須入力の設定は、フォームのバリデーションに役立ちます。ただし、required属性HTML5で導入されたものなので、古いブラウザではサポートされていない可能性があります。

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
編集長
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
編集長
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
編集長
UIHACK 編集長

解説

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

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

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

FAQ
よくあるご質問

  • ラジオボタンの名前属性が正しく設定されているか確認する
    ラジオボタンは同じ名前属性を持つグループとして扱われます。異なる名前属性を持つラジオボタンは独立して選択できます。ラジオボタンがグループに属していることを確認し、選択が競合していないことを確認してください。
  • ラベルのfor属性とラジオボタンのid属性が一致しているか確認する
    ラベルのfor属性は対応するラジオボタンのid属性と一致している必要があります。これにより、ラベルをクリックすることでラジオボタンが選択されるようになります。
  • 選択肢の数
    ラジオボタンは、複数の選択肢の中から1つだけを選択することができます。一方、チェックボックスは複数の選択肢を同時に選択できます。
  • 選択制限
    ラジオボタンは同じ名前属性を持つグループ内で1つしか選択できません。一方、チェックボックスは個別に選択できます。
  • 目的
    ラジオボタンは、選択肢が排他的(1つだけが選択される)場合に使用されます。例えば、性別の選択や単一の選択が必要なアンケートなどで使用されます。一方、チェックボックスは複数の選択肢が可能な場合に使用されます。例えば、複数の興味を持つカテゴリの選択などに使われます。
  • 値の送信
    フォームが送信される際、ラジオボタンは選択された1つの値のみが送信されます。一方、チェックボックスは選択されたすべての値が配列として送信されます。
  • 以下は、ラジオボタンとチェックボックスの例です。
<!-- ラジオボタンの例 -->
<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
編集長
UIHACK 編集長

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

本記事で学んだ事
  • HTMLで実装するラジオボタンの作成方法と基本的な構造
  • ラジオボタンにchecked属性を設定する
  • JavaScriptをラジオボタンの値を「変更」と「取得」する方法

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です