MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. チェックボックス全て選択

チェックボックス全て選択

JavaScript
2024.05.25

すべてのチェックボックスを一括で選択または解除する機能を実装する方法を説明します。

チェックボックス全て選択
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>チェックボックス全て選択について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="checkbox_container" class="checkbox-container">
      <table class="checkbox-table">
        <thead>
          <tr>
            <th style="width: 150px">
              <label for="select_all" class="checkbox-label">
                <input type="checkbox" id="select_all" class="checkbox-input" />
                全て選択
              </label>
            </th>
            <th>名前</th>
            <th>ステータス</th>
            <th>期限</th>
          </tr>
        </thead>
        <tbody>
          <tr class="table-row" data-deadline="2024-06-01">
            <td>
              <input type="checkbox" id="item_1" class="checkbox-input" />
            </td>
            <td>プロジェクト A</td>
            <td>進行中</td>
            <td>2024-06-01</td>
          </tr>
          <tr class="table-row" data-deadline="2024-05-15">
            <td>
              <input type="checkbox" id="item_2" class="checkbox-input" />
            </td>
            <td>プロジェクト B</td>
            <td>完了</td>
            <td>2024-05-15</td>
          </tr>
          <tr class="table-row" data-deadline="2024-07-10">
            <td>
              <input type="checkbox" id="item_3" class="checkbox-input" />
            </td>
            <td>プロジェクト C</td>
            <td>未開始</td>
            <td>2024-07-10</td>
          </tr>
          <tr class="table-row" data-deadline="2024-08-05">
            <td>
              <input type="checkbox" id="item_4" class="checkbox-input" />
            </td>
            <td>プロジェクト D</td>
            <td>進行中</td>
            <td>2024-08-05</td>
          </tr>
        </tbody>
      </table>
      <button class="delete-button" id="delete_selected">削除</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
document.addEventListener("DOMContentLoaded", function() {
  // 全て選択チェックボックスの取得
  const selectAllCheckbox = document.getElementById("select_all");
  // アイテムチェックボックスの取得
  let itemCheckboxes = document.querySelectorAll(".checkbox-input:not(#select_all)");
  // 削除ボタンの取得
  const deleteButton = document.getElementById("delete_selected");

  // 全て選択チェックボックスにイベントリスナーを追加
  selectAllCheckbox.addEventListener("change", function() {
    // 各アイテムチェックボックスを全て選択チェックボックスと同じ状態に設定
    itemCheckboxes.forEach(function(checkbox) {
      checkbox.checked = selectAllCheckbox.checked;
    });
  });

  // 各アイテムチェックボックスにイベントリスナーを追加
  itemCheckboxes.forEach(function(checkbox) {
    checkbox.addEventListener("change", function() {
      // 全て選択チェックボックスの状態を更新
      selectAllCheckbox.checked = Array.from(itemCheckboxes).every(function(itemCheckbox) {
        return itemCheckbox.checked;
      });
    });
  });

  // 削除ボタンにイベントリスナーを追加
  deleteButton.addEventListener("click", function() {
    const checkedItems = Array.from(itemCheckboxes).filter(checkbox => checkbox.checked);
    if (checkedItems.length === 0) {
      alert("削除する項目を選択してください。");
    } else {
      checkedItems.forEach(function(checkbox) {
        checkbox.closest('tr').remove();
      });
      // アイテムチェックボックスの再取得
      itemCheckboxes = document.querySelectorAll(".checkbox-input:not(#select_all)");
    }
  });
});
.checkbox-container {
  margin: 20px;
  font-family: Arial, sans-serif;
}

.checkbox-table {
  width: 100%;
  border-collapse: collapse;
}

.checkbox-table th,
.checkbox-table td {
  padding: 10px;
  border: 1px solid #bbb;
  text-align: left;
}

.checkbox-table th {
  background-color: #f4f4f4;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.delete-button {
  padding: 10px 15px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  background-color: #dc3545;
  color: white;
}

.delete-button:hover {
  background-color: #c82333;
}

.table-row {
  background-color: #ffffff;
}
出力結果
名前 ステータス 期限
プロジェクト A 進行中 2024-06-01
プロジェクト B 完了 2024-05-15
プロジェクト C 未開始 2024-07-10
プロジェクト D 進行中 2024-08-05
JavaScript