JavaScriptでチェックボックスを一括操作！HTMLテーブルでの具体例付き解説

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="headerCheckbox"></th>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>データ1-1</td>
      <td>データ2-1</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>データ1-2</td>
      <td>データ2-2</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>データ1-3</td>
      <td>データ2-3</td>
    </tr>
  </tbody>
</table>
<button id="getDataButton">選択データを取得</button>

// ヘッダーのチェックボックスを取得
const headerCheckbox = document.getElementById('headerCheckbox');

// 行のチェックボックスを取得
const rowCheckboxes = document.querySelectorAll('.rowCheckbox');

// ヘッダーのチェックボックスが変更されたときのイベントリスナー
headerCheckbox.addEventListener('change', () => {
    // ヘッダーのチェックボックスの状態を取得
    const isChecked = headerCheckbox.checked;

    // すべての行のチェックボックスをヘッダーの状態に合わせる
    rowCheckboxes.forEach(checkbox => {
        checkbox.checked = isChecked;
    });
});

// ボタンにクリックイベントを追加
document.getElementById('getDataButton').addEventListener('click', () => {
    // テーブル内のすべての行を取得
    const selectedRows = document.querySelectorAll('tr');
    let selectedData = []; // 選択された行のデータを格納する配列

    // 各行をループ処理
    selectedRows.forEach(row => {
        // 行内のチェックボックスを取得
        const checkbox = row.querySelector('.rowCheckbox');
        if (checkbox && checkbox.checked) {
            // チェックされた行のデータを取得し、配列に追加
            const rowData = Array.from(row.querySelectorAll('td'))
                                    .map(td => td.textContent.trim()) // 各セルの内容を取得
                                    .filter(text => text !== "");    // 空要素を除去
            selectedData.push(rowData.join(', '));
        }
    });

    // 選択されたデータをアラートで表示
    if (selectedData.length > 0) {
        alert("選択されたデータ:\n" + selectedData.join('\n')); // 各行データを改行区切りで表示
    } else {
        alert("選択されたデータはありません。");
    }
});

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; /* 縦方向で中央揃えにする */
}

button {
    margin-top: 20px; /* ボタンとテーブルの間に余白を設定 */
    padding: 10px 20px; /* ボタン内の余白を設定 */
    font-size: 16px; /* ボタンの文字サイズを大きくする */
    background-color: #007bff; /* ボタンの背景色を青に設定 */
    color: white; /* ボタンの文字色を白に設定 */
    border: none; /* ボタンの枠線を非表示にする */
    border-radius: 5px; /* ボタンの角を丸くする */
    cursor: pointer; /* ボタンのカーソルをポインターに変更 */
}

button:hover {
    background-color: #0056b3; /* ボタンをホバーした際に濃い青にする */
}