【JavaScript】ラジオボタンでデータを抽出するサンプルコード

JavaScriptでフォーム操作に慣れてきたら、ユーザーの選択に応じてデータを切り替える仕組みを扱う場面が増えてきます。
今回は、ラジオボタンで選んだ性別に一致するデータだけを抽出し、リストとして表示するシンプルなサンプルコードを紹介します。
DOM操作と配列メソッドを使った基本的な流れを確認しながら、実装のポイントを整理していきます。

挙動をチェック
コード
ラジオボタンを使った自作アプリ

挙動をチェック

人の名前と性別をまとめた配列を使ってデータを抽出します。

今回は下記の配列を使用しました。
男性を選ぶと男性だけが表示、女性を選べば女性だけが表示されることを確認してください。

const persons = [
  { name: '岡田 拓也', gender: 'male' },
  { name: '野村 清', gender: 'male' },
  { name: '池田 浩二', gender: 'male' },
  { name: '石田 武', gender: 'male' },
  { name: '小山 洋平', gender: 'male' },
  { name: '阿部 洋子', gender: 'female' },
  { name: '前田 彩香', gender: 'female' },
  { name: '林 里奈', gender: 'female' },
  { name: '小林 京子', gender: 'female' },
  { name: '伊藤 舞', gender: 'female' },
];

コード

<body>
  <div class="wrap">
    <form>
      <div class="genderSelect">
        <label><input type="radio" name="gender" value="male" checked />男性</label>
        <label><input type="radio" name="gender" value="female" />女性</label>
      </div>
      <button>リスト作成</button>
    </form>
    <ul></ul>
  </div>

  <script>
    const persons = [
      { name: '岡田 拓也', gender: 'male' },
      { name: '野村 清', gender: 'male' },
      { name: '池田 浩二', gender: 'male' },
      { name: '石田 武', gender: 'male' },
      { name: '小山 洋平', gender: 'male' },
      { name: '阿部 洋子', gender: 'female' },
      { name: '前田 彩香', gender: 'female' },
      { name: '林 里奈', gender: 'female' },
      { name: '小林 京子', gender: 'female' },
      { name: '伊藤 舞', gender: 'female' },
    ];

    const form = document.querySelector('form');
    const ul = document.querySelector('ul');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      ul.innerHTML = '';

      const selectedGender = document.querySelector('input[name="gender"]:checked').value;
      const selectedPersons = persons.filter((person) => {
        return person.gender === selectedGender;
      });

      selectedPersons.forEach((selectedPerson) => {
        const li = document.createElement('li');
        li.textContent = selectedPerson.name;
        ul.appendChild(li);
      });
    });
  </script>
</body>

コード全体の概要

このサンプルでは、フォーム内のラジオボタンで選択した性別に一致する人物データを配列から抽出し、該当する名前だけをリスト（ul）に表示します。DOM操作と配列メソッド filter を組み合わせた典型的な実装パターンです。

人物データの定義

const persons = [
  { name: '岡田 拓也', gender: 'male' },
  ...
];

オブジェクトの配列で名前と性別を管理しています。後で filter を使って gender プロパティで絞り込みます。

DOM 要素の取得

const form = document.querySelector('form');
const ul = document.querySelector('ul');

フォーム送信イベントを扱うための form と、結果を出力する ul を取得しています。

submit イベントでの処理

form.addEventListener('submit', (e) => {
  e.preventDefault();
  ul.innerHTML = '';

フォーム送信によるページリロードを防ぎ、前回の出力をクリアします。

選択した性別の取得

const selectedGender = document.querySelector('input[name="gender"]:checked').value;

name 属性が gender のラジオボタンから、現在チェックされている value を取得します。ここでは ‘male’ または ‘female’ になります。

配列から該当データだけを抽出

const selectedPersons = persons.filter((person) => {
  return person.gender === selectedGender;
});

filter を使い、性別が一致する人物だけを新しい配列として取り出しています。

リストに表示

selectedPersons.forEach((selectedPerson) => {
  const li = document.createElement('li');
  li.textContent = selectedPerson.name;
  ul.appendChild(li);
});

抽出した配列をループし、li 要素を生成して ul に追加しています。