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

Question

预期行为

我在 div 元素中有一个复选框。我希望 box 和 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 元素交互。

重现上述sn-p问题的步骤：

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

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

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

但浏览器并未将框呈现为选中状态。

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

Answer 1

checkbox的属性checked和checked状态是有区别的。修正以下代码。

说明：

因为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>