【コピペOK】チェックした行がグレーアウトするチェックリスト – HTML・CSS・JavaScript

<table class="checklist_001">
  <tbody>
    <tr>
      <td class="column_01"><input type="checkbox" /></td>
      <td class="column_02">チェック項目1</td>
      <td class="column_03">チェック項目1の説明</td>
    </tr>
    <tr>
      <td class="column_01"><input type="checkbox" /></td>
      <td class="column_02">チェック項目2</td>
      <td class="column_03">チェック項目2の説明</td>
    </tr>
    <tr>
      <td class="column_01"><input type="checkbox" /></td>
      <td class="column_02">チェック項目3</td>
      <td class="column_03">チェック項目3の説明</td>
    </tr>
    <tr>
      <td class="column_01"><input type="checkbox" /></td>
      <td class="column_02">チェック項目4</td>
      <td class="column_03">チェック項目4の説明</td>
    </tr>
    <tr>
      <td class="column_01"><input type="checkbox" /></td>
      <td class="column_02">チェック項目5</td>
      <td class="column_03">チェック項目5の説明</td>
    </tr>
  </tbody>
</table>

table.checklist_001 {
  width: 100%;
}
table.checklist_001,
table.checklist_001 tr,
table.checklist_001 td {
  color: #000;
  font-size: 1rem;
  border: 1px solid #aaa;
  border-collapse: collapse;
}
table.checklist_001 td {
  padding: 0.8rem;
}
table.checklist_001 .column_01 {
  width: 8%;
  text-align: center;
}
table.checklist_001 .column_02 {
  width: 40%;
}
table.checklist_001 .column_03 {
  width: 52%;
}
table.checklist_001 input[type="checkbox"] {
  accent-color: #aaa;
}
table.checklist_001 .checked-row {
  background-color: #ddd;
}
table.checklist_001 .checked-row td {
  color: #aaa;
}

document.addEventListener("DOMContentLoaded", () => {
  const checkboxes = document.querySelectorAll('.checklist_001 .column_01 input[type="checkbox"]');

  checkboxes.forEach((checkbox) => {
    checkbox.addEventListener("change", () => {
      const tr = checkbox.closest("tr");
      if (checkbox.checked) {
        tr.classList.add("checked-row");
      } else {
        tr.classList.remove("checked-row");
      }
    });
  });
});