为什么我不能在 Javascript 中更改复选框的“已选中”状态？

Question

预期行为

我在 div 元素中有一个复选框。我希望框和 div 都是可点击的。

• 当用户单击复选框时，会向 div 添加一个类以更改其背景颜色。如果再次单击该复选框，则该类将被删除。
• 单击 div 本身时，会根据需要添加或删除具有背景颜色的类，并且选中或取消选中复选框

目前，我使用普通 javascript 完成了大部分工作：

function boxPress(markNumber) {
  var checkbox = "mark" + markNumber;
  var element = document.getElementById(checkbox);
  var markbox = "markbox" + markNumber;
  if (element.getAttribute("checked") == null) {
    element.setAttribute("checked", "checked");
    document.getElementById(markbox).classList.add('checked');
  } else {
    element.removeAttribute("checked");
    document.getElementById(markbox).classList.remove('checked');
  }
}

.mark {
  margin-bottom: 5px;
  margin-top: 5px;
  background-color: #FFFFFF;
  border-width: 2px;
  border-radius: 0px 5px 5px 0px;
  border-left-style: solid;
  border-left-width: 10px;
  border-color: lime;
  overflow: auto;
  padding: 2%;
  transition: background-color 0.5s linear 0s;
  cursor: pointer;
}

.checked {
  background-color: #66ff66;
}

.mark:hover {
  background-color: #fffcaf;
}

.checked:hover {
  background-color: #b3ffb3;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0px;
}

.flex-mark {
  width: 85%;
  margin: 0px;
}

.flex-tick {
  width: 15%;
  margin: 0px;
  text-align: center;
}

.flex-tick input {
  width: 40px;
  height: 40px;
}

<div class="mark col-12 col-m-6" id="markbox0" onclick="boxPress(0)">
  <div class="flex-container">
    <div class="flex-mark">
      <p>Candidate introduces themself by first name, surname and role</p>
    </div>
    <div class="flex-tick"><input type="checkbox" id="mark0"></div>
  </div>
</div>

除了用户首先与复选框交互，然后与 div 元素交互之外，这非常有效。

重现上述代码段中问题的步骤：

1. 单击 div。背景发生变化，复选框被勾选。
2. 再次单击 div。更改按预期反转。
3. 单击复选框。应用背景更改。
4. 再次单击复选框。更改按预期反转。
5. 现在再次单击 div。背景发生变化，但复选框保持未选中状态

更有趣的是，复选框的 HTML 内容如下：

<input type="checkbox" id="mark0" checked="true">

然而，浏览器不会将该框呈现为选中状态。

为什么会发生这种情况，为什么只有在框单击后出现 div 单击时才会出现问题？它发生在 Chrome 和 Edge 中。

Answer 1

复选框的选中状态和选中状态之间存在差异。固定代码如下。

解释：

因为checked可以在标记中设置属性来“预检查”复选框，所以 DOM 必须具有checked复选框的状态，否则无法“取消选中”它。无法取消选中的复选框不会很有用。

当您第一次（使用 javascript）设置属性时，它会像您将它放入 HTML 一样选中该框，但之后 DOM 会忽略该属性，因为它需要依赖于上面解释的选中状态。

function boxPress(markNumber) {
  var checkbox = "mark" + markNumber;
  var element = document.getElementById(checkbox);
  var markbox = "markbox" + markNumber;
  if (element.getAttribute("checked") == null) {
    element.setAttribute("checked", "true");
    element.checked = true;
    document.getElementById(markbox).classList.add('checked');
  } else {
    element.removeAttribute("checked");
    element.checked = false;
    document.getElementById(markbox).classList.remove('checked');
  }
}

.mark {
  margin-bottom: 5px;
  margin-top: 5px;
  background-color: #FFFFFF;
  border-width: 2px;
  border-radius: 0px 5px 5px 0px;
  border-left-style: solid;
  border-left-width: 10px;
  border-color: lime;
  overflow: auto;
  padding: 2%;
  transition: background-color 0.5s linear 0s;
  cursor: pointer;
}

.checked {
  background-color: #66ff66;
}

.mark:hover {
  background-color: #fffcaf;
}

.checked:hover {
  background-color: #b3ffb3;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin: 0px;
  padding: 0px;
}

.flex-mark {
  width: 85%;
  margin: 0px;
}

.flex-tick {
  width: 15%;
  margin: 0px;
  text-align: center;
}

.flex-tick input {
  width: 40px;
  height: 40px;
}

<div class="mark col-12 col-m-6" id="markbox0" onclick="boxPress(0)">
  <div class="flex-container">
    <div class="flex-mark">
      <p>Candidate introduces themself by first name, surname and role</p>
    </div>
    <div class="flex-tick"><input type="checkbox" id="mark0"></div>
  </div>
</div>