显示在第一次点击后出现，但当它应该消失时显示仍然存在答案

【问题标题】：Display appearing after first onclick but then display remains when it should disappear显示在第一次点击后出现，但当它应该消失时显示仍然存在
【发布时间】：2019-07-12 03:03:52
【问题描述】：

我正在尝试根据复选框的状态显示和消失一个下拉列表和文本。如果单击复选框，我希望标签和下拉列表出现，并在未选中时消失。元素开始不可见，并且在我选中复选框后元素出现，但是，当我取消选中复选框时，元素不会消失。

我尝试使用 onclick 属性调用一个函数，该函数根据复选框的状态更改两个元素的属性。但是，它只会在第一次点击时起作用。

这是html代码：

<div class="formItem">
    <label>Affect Commission Cost</label>
    <form:checkbox path="affectCommissions" id="affectCommissions" onchange="toggleCommissionItems()"/>
    <label id="commissionItemTypeLabel" style="display: none">Commission Item Type</label>
    <form:select path="commissionItemType" id="commissionItem" cssStyle="display: none">
        <form:options items="${commissionItems}" itemLabel="name" itemValue="code"></form:options>
    </form:select>
</div>

这是被调用的函数：

function toggleCommissionItems(){
  var checkBox = document.getElementById("affectCommissions");
  var item = document.getElementById("commissionItem");
  var label = document.getElementById("commissionItemTypeLabel");
  if (checkBox.checked == true){
    item.style.display = "inline";
    label.style.display = "inline";
  } else {
    item.style.display = "none";
    label.style.display = "none";
  }
}

它应该总是切换元素是否出现在页面上，但是它只在第一次尝试时起作用。

【问题讨论】：

尝试在其中某处添加console.log(checkBox.checked) 以验证checked 是否更改为false。

标签： javascript html checkbox onclick display

【解决方案1】：

我认为这是您正在寻找的工作版本。我相信标签的命名方式可能存在问题，即。 form:checkbox 和标签中的样式属性。

function toggleCommissionItems() {
  var checkBox = document.getElementById("affectCommissions");
  var item = document.getElementById("commissionItem");
  var label = document.getElementById("commissionItemTypeLabel");

  if (checkBox.checked == true) {
    label.style.display = "inline";
    item.style.display = "inline";
  } else {
    label.style.display = "none";
    item.style.display = "none";
  }

}

<div class="formItem">
  <label>Affect Commission Cost</label>
  <form>
    <input type="checkbox" path="affectCommissions" id="affectCommissions" onchange="toggleCommissionItems()" />
    <label id="commissionItemTypeLabel" style="display:none">Commission Item Type</label>
    <select path="commissionItemType" id="commissionItem" style="display:none">
      <options items="${commissionItems}" itemLabel="name" itemValue="code"></options>
    </select>
  </form>
</div>

【讨论】：