Question

预期行为

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

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

目前，我的大部分工作都是使用普通的javascript：

＆＃13;

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');
  }
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

点击div。选中背景并勾选复选框。
再次点击div。这些变化正如预期的那样发生逆转。
点击复选框。应用背景更改。
再次点击该复选框。这种变化正如预期的那样发生逆转。
现在再次点击div。发生背景更改但复选框仍然未选中

更有趣的是，复选框的HTML显示为：

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

然而，浏览器并未将该框呈现为已选中。

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

Answer 1

选中的属性与复选框的已检查状态之间存在差异。修正了以下代码。

<强>解释

因为checked属性可以在标记中设置为＆＃34;预先检查＆＃34;对于复选框，DOM必须具有checked状态的复选框，否则将无法＆＃34;取消选中＆＃34;它。无法取消选中的复选框不是非常有用。

当您第一次设置属性时（使用javascript），它会检查该框，就像您将其放入HTML中一样，但DOM之后忽略该属性，因为它需要依赖于检查状态，如上所述

＆＃13;

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');
  }
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

为什么我不能更改已检查的＆＃39; Javascript中的复选框状态？

1 个答案: