チェックボックス一括削除 仕組み

使用例 (SNS投稿削除 / お気に入り / カート)
チェックボックスに idつける
チェック → チェックIDだけ保存
一括削除ボタンが押されたら、配列のIDを消す

チェックボックス各行 (.row-checkbox)
一括削除ON時のみ checkbox　表示
if (e.target.classList.contains('rowCheck')) {
const id = parseInt(e.target.dataset.id);
if (e.target.checked) {
selectedIds.push(id);

一括削除機能

html

<table id="dataTable">
  <tr>
    <th><input type="checkbox" id="selectAll"></th>
    <th>名前</th><th>年齢</th><th>削除対象</th>
  </tr>
  <!-- 以下、動的に行が追加される -->
</table>

<button id="checkButton" disabled>🗑️ 一括削除</button>

js

let selectedIds = [];

document.addEventListener('change', (e) => {
  if (e.target.classList.contains('rowCheck')) {
    const id = parseInt(e.target.dataset.id);
    if (e.target.checked) {
      selectedIds.push(id);
    } else {
      selectedIds = selectedIds.filter(x => x !== id);
    }
    // ボタン有効化切り替え
    document.getElementById('checkButton').disabled = selectedIds.length === 0;
  }
});

削除関数

document.getElementById('checkButton').addEventListener('click', async () => {
  if (!confirm('本当に削除しますか？')) return;
  try {
    for (const id of selectedIds) {
      await axios.delete(`${API_BASE_URL}/${id}`);
    }
    selectedIds = [];
    renderTable(); // 再描画関数
  } catch (err) {
    console.error('削除エラー:', err);
    alert('一括削除に失敗しました');
  }
});

一括削除　解説

CSSスタイル追加:
#bulkActionsContainer,
#toggleBulkDeleteModeButton,
#bulkDeleteButton

.custom-checkbox : チェックボックスの非選択時 黒枠線、
選択時のオレンジ色の背景色、白いチェックマーク

削除確認 Toasty
window.confirm() →（#confirmModal）

行全部チェックボックス）の表示/非表示
#toggleBulkDeleteModeButton
#bulkActionsContainer（#bulkDeleteButton

#selectAllCheckboxes 全チェックボックスの選択/解除。
一括削除: #bulkDeleteButton