Radio checked 取得

JavaScript におけるラジオボタン操作：Radio Checked を使いこなす

このページでは、JavaScript を使用してラジオボタンの選択状態を取得・設定する方法について、"radio checked" 属性を中心に解説します。選択状態の取得、設定、そして一般的な使用例を網羅することで、フォーム操作をより深く理解することを目指します。

1. Radio Checked 属性：基礎知識

まずは、ラジオボタンの基本と "checked" 属性の役割について確認しましょう。

1.1. ラジオボタンの役割

ラジオボタンは、複数の選択肢の中から **1 つだけ** を選択させる際に使用されるフォーム要素です。例えば、性別選択やアンケートの回答選択肢などに用いられます。

1.2. HTML での記述方法

ラジオボタンは、HTML では `` タグで表現されます。重要な属性は以下の通りです。

type="radio"：要素をラジオボタンとして定義します。
name：同じグループのラジオボタンには、必ず同じ名前を付ける必要があります。これにより、1 つだけ選択できるようになります。
value：選択された際に送信される値を設定します。
checked：ラジオボタンが初期状態で選択されているかどうかを指定します。省略した場合は、選択されていません。

<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female" checked> 女性

1.3. "checked" 属性

checked 属性は、ラジオボタンが選択されているかどうかを示すために使用します。属性値はブール値で、

checked 属性が存在する、または checked="true" となっている場合は、選択状態
checked 属性が存在しない、または checked="false" となっている場合は、非選択状態

を表します。JavaScript を使用して動的に選択状態を変更することも可能です。

2. JavaScript で Radio Checked 状態を取得する

JavaScript でラジオボタンの選択状態を取得するには、以下の手順を踏みます。

2.1. ラジオボタン要素の取得

document.querySelector() または document.querySelectorAll() を使用して、目的のラジオボタン要素を取得します。name 属性や id 属性を指定して、特定のラジオボタンを絞り込むことができます。

<input type="radio" name="color" value="red" id="red"> 赤
<input type="radio" name="color" value="blue" id="blue" checked> 青

<script>
  const redRadio = document.querySelector('#red'); 
  const blueRadio = document.getElementById('blue'); 
</script>

2.2. "checked" 属性へのアクセス

取得したラジオボタン要素の checked プロパティを参照することで、選択状態を取得できます。checked プロパティは、選択状態であれば true、そうでなければ false を返します。

<script>
  if (redRadio.checked) {
    console.log('赤が選択されています'); 
  } else if (blueRadio.checked) {
    console.log('青が選択されています'); 
  } else {
    console.log('どちらも選択されていません'); 
  }
</script>

3. JavaScript で Radio Checked 状態を設定する

JavaScript でラジオボタンの選択状態を設定するには、checked プロパティに true または false を代入します。

<button onclick="selectRed()">赤を選択</button>
<button onclick="selectBlue()">青を選択</button>

<script>
  const redRadio = document.getElementById('red'); 
  const blueRadio = document.getElementById('blue'); 

  function selectRed() {
    redRadio.checked = true;
    blueRadio.checked = false; 
  }

  function selectBlue() {
    redRadio.checked = false; 
    blueRadio.checked = true;
  }
</script>

注意： 同じグループ内のラジオボタンは、1 つだけしか選択できません。あるラジオボタンを true に設定すると、同じグループ内の他のラジオボタンは自動的に false に設定されます。

4. Radio Checked の応用

Radio Checked の操作は、様々な場面で活用できます。代表的な例をいくつか紹介します。

4.1. フォーム送信

ユーザーが選択したラジオボタンの値を取得し、サーバーに送信することができます。これにより、ユーザーの選択に基づいた処理を行うことができます。

4.2. 動的なコンテンツ表示

ユーザーの選択したラジオボタンに応じて、表示するコンテンツを切り替えることができます。例えば、アンケートの設問によって回答選択肢を変える場合などに有効です。

4.3. ユーザーインターフェースのインタラクション

複数ステップのフォームで、前のステップの選択に応じて次のステップの内容を変える場合などに使用できます。ユーザーの選択に合わせた柔軟なフォームを作成することができます。

5. まとめ

radio checked 属性は、JavaScript でラジオボタンの選択状態を操作するための重要なプロパティです。checked プロパティの取得と設定をマスターすることで、ユーザーの選択に基づいた動的でインタラクティブなウェブページを作成することができます。

Q&A

Q1: `document.querySelector()` と `document.querySelectorAll()` の違いは何ですか？

document.querySelector() は、条件に一致する最初の要素を返します。一方、document.querySelectorAll() は、条件に一致するすべての要素を NodeList として返します。複数のラジオボタンから特定のものを選択したい場合は、document.querySelector() を、すべてのラジオボタンを取得したい場合は、document.querySelectorAll() を使用します。

Q2: ラジオボタンの選択状態が変更されたことを検知するにはどうすれば良いですか？

ラジオボタン要素に対して change イベントリスナーを設定することで、選択状態が変更されたタイミングで処理を実行することができます。

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

radioButtons.forEach(radioButton => {
  radioButton.addEventListener('change', () => {
    console.log('選択状態が変更されました');
  });
});

Q3: JavaScript でラジオボタンを動的に生成するにはどうすれば良いですか？

document.createElement() を使用して input 要素を作成し、必要な属性を設定することで、ラジオボタンを動的に生成することができます。

const newRadio = document.createElement('input');
newRadio.type = 'radio';
newRadio.name = 'dynamicRadios';
newRadio.value = 'newOption';

// 親要素に newRadio を追加する処理

その他の参考記事:jquery radio checked 取得