Question

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

我尝试使用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";
  }
}

它应该始终切换元素是否显示在页面上，但是仅在第一次尝试时有效。

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

首次单击后显示出现，但应消失后仍保留显示

1 个答案: