单击其他地方并勾选/取消勾选复选框[重复]

Question

所以我有一段代码来创建一个包含一些数据的表。第一列包含复选框，其他列只是常规数据。

我想要的是，当我单击随机行上的任意位置（标题除外）时，整行的背景会变成黄色（最初是白色），并且该行中的复选框被勾选。如果我再次单击，该行中的所有内容都会恢复正常（白色行和未选中的复选框）。

当我在复选框上单击鼠标右键时，一切都按预期进行。但是，当我单击其他地方时，只会更改背景。我已经检查了复选框的checked 属性，并且每当我单击时它都会更改（这与正常情况一样）。我不知道为什么会这样。我浏览了许多有类似问题的帖子，但没有帮助。我只是 Javascript 和 HTML 的初学者。请帮我解决一下这个。非常感谢！

function changeColorRow(number) {
  var elem = document.getElementsByTagName("tr")[number]
  var curr_check = document.getElementsByClassName("checkbox").checked
  if (!curr_check) {
    elem.style.backgroundColor = "yellow"
    document.getElementsByClassName("checkbox").checked = true
  } else {
    elem.style.backgroundColor = "white"
    document.getElementsByClassName("checkbox").checked = false
  }
}

<h1>List of companies</h1>
<table id="company">
  <tr>
    <th>Choose</th>
    <th>ID</th>
    <th>Company</th>
    <th>Website</th>
  </tr>
  <tr onclick="changeColorRow(1)">
    <td><input type="checkbox" class="checkbox"></td>
    <td>1</td>
    <td>ECOPRO Co., Ltd</td>
    <td>http://www.ecoprovn.com</td>
  </tr>
  <tr onclick="changeColorRow(2)">
    <td><input type="checkbox" class="checkbox"></td>
    <td>2</td>
    <td>WAVINA.COM</td>
    <td>http://www.wavina.com</td>
  </tr>
</table>

Answer 1

document.getElementsByClassName 返回一个类似结构的数组，您必须使用索引来获取该索引处的特定元素。

document.getElementsByClassName("checkbox")

你可以得到点击行的索引为

index = number - 1

const allCheckbox = document.getElementsByClassName("checkbox");

function changeColorRow(number) {
  const index = number - 1;
  var elem = document.getElementsByTagName("tr")[number]
  var curr_check = document.getElementsByClassName("checkbox")[index].checked

  if (!curr_check) elem.style.backgroundColor = "yellow"
  else elem.style.backgroundColor = "white"

  allCheckbox[index].checked = !allCheckbox[index].checked
}

[...allCheckbox].forEach(cb => {
  cb.addEventListener("change", (e) => changeColorRow(parseInt(e.target.dataset.index)))
})

tr {
  cursor: default;
  user-select: none;
}

<h1>List of companies</h1>
<table id="company">
  <tr>
    <th>Choose</th>
    <th>ID</th>
    <th>Company</th>
    <th>Website</th>
  </tr>
  <tr onclick="changeColorRow(1)">
    <td><input type="checkbox" class="checkbox" data-index="1"></td>
    <td>1</td>
    <td>ECOPRO Co., Ltd</td>
    <td>http://www.ecoprovn.com</td>
  </tr>
  <tr onclick="changeColorRow(2)">
    <td><input type="checkbox" class="checkbox" data-index="2"></td>
    <td>2</td>
    <td>WAVINA.COM</td>
    <td>http://www.wavina.com</td>
  </tr>
</table>