JavaScriptでテーブルチェックボックスを1つだけ選択可能にする方法

当ページのリンクには広告 (Amazonアソシエイト含む) が含まれています。
アイキャッチ

HTMLで作成したテーブルの各行にチェックボックスを設置し、1つだけ選択可能にしたい!
と思ったことはありませんか?

こんなことがしたい

・チェックボックスの選択肢の中から1つだけ選んでほしい

この記事は、JavaScriptを使用して
「チェックボックスを1つだけ操作」する方法を紹介します。


チェックボックスを使って複数の選択肢を用意する場面はよくありますが、「選択肢の中から1つだけ選んでほしい」というケースも多いですよね。

例えば
  • ユーザーが「どの配送方法を選ぶか」を指定する場合
  • アンケートで「最も当てはまるものを1つ選ぶ」場合
  • 管理ツールで「操作する対象を1つだけ選択する」場合

通常のチェックボックスは複数選択が可能ですが、JavaScriptを使えば簡単に「1つだけ選べる仕様」に変更できます。

この記事では、初心者の方でも理解しやすいように、実際のコード例を交えながら解説していきます!
初心者の方でも安心して実装できるよう、具体的なコード例とその解説を詳しく掲載していますので、ぜひ最後までお読みください!


【 この記事の概要 】

よく使う度
難しさ
覚えておくと安心度

JavaScriptをしっかり学びたいけれど、「どこから始めればいいかわからない」と迷っていませんか?

そんな方には、UdemyのJavaScript講座がおすすめです。

特に、動画学習の強みは「自分のペースで学べる」ことです。
わからない部分を何度でも繰り返し確認できるため、実際に手を動かしながら理解を深めることができます。これにより、JavaScriptを効率よく学び、実務や趣味のプロジェクトでスキルを活用できるようになります!

もし、「動画を使って効率的に学びたい」と思ったら、ぜひ一度Udemyをチェックしてみてください。

多彩な講座から自分に合った講座を探そう!
UdemyでJavaScriptを検索 画像出典:Udemy

\  動画で効率的に学べる!初心者におすすめのJavaScript講座  /

目次

この記事を読むことで「できるようになる」こと

スポンサーリンク

なぜチェックボックスを「1つだけ選択可能」にすると便利なのか?

チェックボックスを1つだけ選択できる仕組みを作ると、以下のような場面で役立ちます。

便利ポイント
  • 選択ミスを防げる
    • 一度に複数の選択を防止したい場合に最適です。
      例えば、ユーザーに「1つのオプションしか選べません」というルールを明確に伝えられます。
  • UI/UXの向上
    • ユーザーが操作時に迷わない直感的なインターフェースを提供できます。
      特にモバイルユーザーにとってもシンプルで分かりやすい操作が可能です。
  • データ処理の簡略化
    • バックエンドでデータ処理を行う際、「1つだけ選ばれた状態」を前提に処理を簡単に設計できます。

JavaScriptで「チェックボックスを1つだけ選択する仕組み」を完全解説!HTML・CSSの設定も紹介

「チェックボックスを1つだけ選択可能にする仕組み」を以下のように動作として簡単に説明します。

動作概要
  1. 各データのチェックボックスをクリック
    • 1つのチェックボックスをクリックすると、それ以外のチェックボックスの選択が自動的に外れます。

See the Pen Untitled by Sean (@Sean-Sean-Sean) on CodePen.

チェックボックスの基本的な仕様についてもっと知りたい方は、MDN Web Docsの <input type=”checkbox”> をご覧ください。

それでは、この機能を実装するための具体的なコードについて、次のセクションで詳しく解説していきます。

解説1. HTMLでチェックボックス付きテーブルを作成する方法

「チェックボックス付きのテーブル」を作成するHTMLコードを以下に記載します。

<table>
    <thead>
        <tr>
            <th>選択</th>
            <th>名前</th>
            <th>情報</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="checkbox-row"></td>
            <td>田中</td>
            <td>情報1</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox-row"></td>
            <td>佐藤</td>
            <td>情報2</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="checkbox-row"></td>
            <td>鈴木</td>
            <td>情報3</td>
        </tr>
    </tbody>
</table>
ポイント解説
  • class=”checkbox-row”
    • 各行のチェックボックスをグループ化するためのクラス名です。
      これを使うことで、すべての行をまとめて操作できるようになります。

解説2. JavaScriptでチェックボックスを「1つだけ選択可能」にする方法

チェックボックスを「1つだけ選択可能」にするためのJavaScriptコードを以下に記載します。

// チェックボックスが含まれているテーブル全体を取得します。
const checkboxData = document.querySelector('table');

// テーブル内でチェックボックスの状態が変化した時にイベントを実行
checkboxData.addEventListener('change', (e) => {
    
    // 変更があった要素がチェックボックスかどうかを確認
    if (e.target.classList.contains('checkbox-row')) {

        // 現在チェックされたチェックボックスを取得
        const currentCheckbox = e.target;

        // テーブル内にあるすべてのチェックボックスを取得
        const allcheckBoxes = document.querySelectorAll('.checkbox-row');

        // すべてのチェックボックスをループ処理
        allcheckBoxes.forEach(cb => {
            // 現在チェックされたチェックボックス以外のチェックを外す
            if (cb !== currentCheckbox) {
                cb.checked = false; // チェック状態を解除
            }
        });   
    };
});
ポイント解説
  • querySelector
    • 指定したセレクタに一致する最初の要素を取得します。
      今回はquerySelector('table')で、テーブル全体を取得しています。
  • querySelectorAll
    • 指定したセレクタに一致するすべての要素を取得します。
      今回はquerySelectorAll('.checkbox-row')を使って、テーブル内のすべてのチェックボックスを取得しています。
  • addEventListener
    • 指定した要素にイベントリスナーを追加し、特定のイベントが発生したときに処理を実行します。
      今回は、changeイベントを使って「チェックボックスの状態が変化したとき」に処理を実行しています。
  • classList.contains
    • 要素に指定したクラスが含まれているかを確認するメソッドです。
      今回は、if (e.target.classList.contains('checkbox-row'))を使って、変更があった要素がクラス名checkbox-rowを持つかどうかを確認しています。
      これにより、チェックボックス以外の要素にイベントが誤って適用されるのを防ぐことができます。
「クリック」で、1行ずつコードの解説を見る
  1. const checkboxData = document.querySelector(‘table’);
    • HTML内にある<table>タグ(テーブル全体)を取得します。
      このテーブル内に含まれる要素(特にチェックボックス)を操作するための準備を行っています。
  2. checkboxData.addEventListener(‘change’, (e) => {
    • checkboxData(テーブル全体)に対して、「change」イベントリスナーを追加しています。
      これにより、テーブル内のどこかでチェックボックスの状態が変更されると、この関数((e) => { ... })が実行されます。
    • addEventListener('change', ...)は、チェックボックスがオンまたはオフに切り替わったときに反応します。
  3. if (e.target.classList.contains(‘checkbox-row’)) {
    • イベントが発生した要素(e.target)が、クラス名checkbox-rowを持つか確認しています。
      これにより、チェックボックス以外の変更(テーブル内の他の要素への変更)には処理を実行しないようにしています。
  4. const currentCheckbox = e.target;
    • 現在変更があったチェックボックス(クリックされたチェックボックス)を取得しています。
      このチェックボックスがどれなのかを特定するために使います。
  5. const allcheckBoxes = document.querySelectorAll(‘.checkbox-row’);
    • テーブル内にあるすべてのチェックボックス(class="checkbox-row"を持つ要素)を取得しています。
      これにより、チェックボックス全体をまとめて操作できるようになります。
  6. allcheckBoxes.forEach(cb => {
    • 取得したすべてのチェックボックスに対して、1つずつ順番に処理を行います。
      forEachを使うことで、配列のようなNodeList内の要素を繰り返し処理することができます。
  7. if (cb !== currentCheckbox) {
    • 現在チェックされたチェックボックス(currentCheckbox)以外のチェックボックスを条件として処理を実行します。
      この条件に該当する場合だけ、以下の処理を行います。
      !==は「等しくない」という比較演算子です。
  8. cb.checked = false;
    • 現在チェックされたチェックボックス以外のチェックボックスの状態をfalse(未チェック)に変更しています。
      これにより、1つだけ選択可能な状態が保たれます。
  9. });
    • if文の処理を終了します。
      この括弧の内側には、「クラス名がcheckbox-rowを持つチェックボックスだけを対象とする処理」が記述されています。
  10. };
    • if文の処理を終了します。
      この括弧の内側には、「クラス名がcheckbox-rowを持つチェックボックスだけを対象とする処理」が記述されています。
  11. });
    • addEventListener内の処理が終了することを示します。
      この括弧の内側に、イベントが発生したときに実行される処理全体が書かれています。

解説補足. CSSでチェックボックスとテーブルデザインを調整

テーブルの見た目を整え、チェックボックスを見やすくするCSSコードを以下に記載します。

table {
    border-collapse: collapse; /* テーブルセルの枠線を結合して1本にする */
    margin: 20px 0; /* 上下にスペースを追加 */
}

th {
    background-color: #f8f7f6; /* ヘッダーの背景色を薄いグレーに設定 */
}

th, td {
    border-bottom: solid 1px black; /* セルの下線を黒色で実線に設定 */
    padding: 15px; /* セル内の文字や内容に余白を設定(上下左右15pxずつ) */
    text-align: center; /* セル内の文字を中央揃えに設定 */
}

input[type="checkbox"] {
    transform: scale(1.5); /* チェックボックスを1.5倍に拡大 */
    vertical-align: middle; /* 縦方向で中央揃えにする */
}
ポイント解説
  • table
    • テーブル全体のデザインを整えるために使用します。
      • border-collapse: collapse
        • セル同士の境界線を結合し、テーブル内の隙間をなくしてスッキリとした見た目にします。
      • margin: 20px 0
        • テーブルの上下に20pxのスペースを追加し、周囲の要素と適度な余白を作ります。
  • th
    • テーブルのヘッダー部分の見た目を整えるために使用します。
      • background-color: #f8f7f6
        • ヘッダー部分の背景色を薄いグレー(#f8f7f6)に設定することで、データ部分と区別しやすくなります。
  • th, td
    • テーブルのヘッダーとデータセルのスタイルを統一します。
      • border-bottom: solid 1px black
        • 各セルの下部に黒の実線を引き、行を視覚的に区切ります。
      • padding: 15px
        • セル内の文字や内容に上下左右15pxの余白を追加し、要素同士が詰まりすぎないようにします。
      • text-align: center
        • 各セル内の文字や内容を中央揃えにして、見た目を整えます。
  • input[type=”checkbox”]
    • チェックボックスのスタイルを調整し、見やすく操作しやすいデザインにします。
      • transform: scale(1.5)
        • チェックボックスを1.5倍に拡大して、操作しやすい大きさにします。
      • vertical-align: middle
        • チェックボックスをセル内でテキストの中央に揃え、全体的にバランスの取れた見た目にします。
スポンサーリンク

チェックボックスを「1つだけ選択可能」にする際の注意点と解決策

チェックボックスを「1つだけ選択可能」にする仕組みを実装する際には、いくつかの注意点を押さえておく必要があります。
これらを無視すると、意図しない動作やユーザーエクスペリエンスの低下につながる可能性があります。

注意1: 他のチェックボックスに影響を与えないためのセレクタ設定

セレクタを適切に限定しない場合、他のテーブルやページ内のチェックボックスにも影響を与える可能性があります。
特に、大規模なページや複数のテーブルがある場合、これが原因で意図しない動作が発生することがあります。

解決策

特定のテーブル内のチェックボックスだけを操作するため、まずそのテーブル全体を取得し、次にその中のチェックボックスを対象にするコードを記述します。

例えば以下のように記述してください。

const table = document.querySelector('#myTable');
const checkboxes = table.querySelectorAll('.checkbox-row');

注意2: チェックボックス以外のイベントが動作しないように制御する

テーブル内の他の要素(例えばセル内のテキストやリンクなど)でイベントが発生した場合、意図しない動作を引き起こすことがあります。
これを防ぐには、変更された要素が本当にチェックボックスであるかを確認する必要があります。

解決策

以下のように、if (e.target.classList.contains('checkbox-row'))を使用して対象を限定します。

if (e.target.classList.contains('checkbox-row')) {
    // チェックボックスが対象の場合のみ処理を実行
}

注意3: モバイルでも使いやすいチェックボックスデザインを実現する

チェックボックスが小さすぎると、特にスマートフォンやタブレットなどのタッチデバイスで操作が困難になります。
タップミスが発生すると、ユーザーの満足度が低下する可能性があります。

解決策

CSSでチェックボックスを拡大するなど、タップしやすいデザインを取り入れましょう。

以下は例です。

input[type="checkbox"] {
    transform: scale(1.5); /* チェックボックスを1.5倍に拡大 */
    margin-right: 10px; /* チェックボックスとテキストの間に余白を追加 */
}
スポンサーリンク

この記事のまとめ

この記事では、JavaScriptを使って「チェックボックスを1つだけ選択可能」にする方法を初心者向けに解説しました。

チェックボックスを1つだけ選択可能にする仕組みを実装することで、ユーザー体験を向上させ、選択ミスを防ぎ、データ処理を効率化することができます。
さらに、HTML・CSS・JavaScriptを組み合わせて見た目や使いやすさにも配慮した実装方法を詳しく紹介しました。

ポイントのおさらい

今回の学びを活用するために

この記事で紹介した方法は、以下のような場面で特に役立ちます。

  • アンケートフォームの作成
    • 質問に対して1つの答えを選ばせる場面で、簡単に実装できます。
  • 業務ツールの選択機能
    • 管理画面で「操作対象を1つだけ選択する」といった要件に対応可能です。
  • モバイルファーストデザインの実現
    • チェックボックスを大きく拡大するなど、モバイルユーザーにも配慮した設計ができます。
あわせて読みたい
サイトマップ このページは、本サイトの記事を分かりやすくまとめました。ぜひご覧ください。 目次 「VBA」を見る 「Officeスクリプト」を見る 「ワークシート関数」を見る 「JavaScr...
スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次