<table>
  <tr>
    <td id="td1">Cell 1</td>
    <td id="td2">Cell 2</td>
    <td id="td3">Cell 3</td>
  </tr>
</table>

// 获取复选框元素
var checkbox = document.getElementById("checkbox");

// 监听复选框的状态变化
checkbox.addEventListener("change", function() {
  // 判断复选框是否被选中
  if (checkbox.checked) {
    // 选中状态，添加样式
    document.getElementById("td1").classList.add("selected");
    document.getElementById("td2").classList.add("selected");
    document.getElementById("td3").classList.add("selected");
    document.getElementById("td1").parentNode.classList.add("highlight");
    document.getElementById("td2").parentNode.classList.add("highlight");
    document.getElementById("td3").parentNode.classList.add("highlight");
  } else {
    // 非选中状态，移除样式
    document.getElementById("td1").classList.remove("selected");
    document.getElementById("td2").classList.remove("selected");
    document.getElementById("td3").classList.remove("selected");
    document.getElementById("td1").parentNode.classList.remove("highlight");
    document.getElementById("td2").parentNode.classList.remove("highlight");
    document.getElementById("td3").parentNode.classList.remove("highlight");
  }
});

.selected {
  background-color: yellow;
}

.highlight {
  border: 2px solid red;
}