Дисплей появляется после первого нажатия, но затем дисплей остается, когда он должен исчезнуть - PullRequest
Новая
       33

Дисплей появляется после первого нажатия, но затем дисплей остается, когда он должен исчезнуть

0 голосов
/ 11 июля 2019

Я пытаюсь, чтобы раскрывающийся список отображался и исчезал в зависимости от состояния чекбокса.Если флажок установлен, я хочу, чтобы метка и раскрывающийся список появлялись и исчезали, когда они не отмечены.Элементы начинают невидимы, и после того, как я проверяю cheeckbox, появляются элементы, однако, когда я снимаю флажок с чекбокса, элементы не исчезают.

Я попытался использовать свойство 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";
  }
}

Этодолжен всегда переключаться, появляются ли элементы на странице, однако это работает только с первой попытки.

1 Ответ

0 голосов
/ 11 июля 2019

Вот то, что я считаю рабочей версией того, что вы искали.Я считаю, что, возможно, возникла проблема с тем, как были названы теги, т.е.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>
...