Блог

Главная - Вопросы по программированию - обработчики onchange и onreset не обновляют свойства css при сбросе

обработчики onchange и onreset не обновляют свойства css при сбросе

#javascript #css #forms #onchange #reset

Вопрос:

У меня есть форма (которую я, кстати, генерирую на PHP из базы данных), которая использует CSS для замены флажков. Когда checkbox флажок установлен, содержащее <li> должно быть outline добавлено, а когда флажок снят, контур должен быть удален. Использование onchange событий позволяет изменять их одним щелчком мыши, но контуры остаются при сбросе формы. Я добавил onreset события, чтобы попытаться принудительно удалить, но это, похоже, ничего не меняет.

Я воссоздал это поведение во фрагменте. (Я не скрывал флажки, так как система фрагментов, по-видимому, не дублирует обычное поведение браузера при нажатии на <label> флажок установить или снять флажок. [ПРАВКА: Это была моя ошибка; я неправильно for поставил метки, и теперь это поведение работает. Остальное остается в силе.])

Как мне заставить это работать? У меня могла бы быть функция, которая вручную устанавливает каждую outline функцию сброса, но, как я уже сказал, флажки создаются из базы данных, поэтому мне пришлось бы написать PHP для написания функции js, что кажется неправильным.

 function doCheckboxes(clicked_id) {
  if (document.getElementById(clicked_id).checked) {
    document.getElementById(clicked_id).parentNode.style.outline = "2px solid black";
  } else {
    document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
  }
}

function clearCheckboxes(clicked_id) {
  document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
} 
 li {
  display: inline-block;
  margin: 10px;
  text-align: center;
  font-weight: 600;
}

.imageholder {
  display: block;
  height: 60px;
  width: 60px;
  background-repeat: no-repeat;
  background-clip: content-box;
  background-size: cover;
  margin: auto;
}

.has-thing1 .imageholder {
  background-image: url(path/to/image.png);
}

.has-thing2 .imageholder {
  background-image: url(path/to/image.png);
}

.has-thing3 .imageholder {
  background-image: url(path/to/image.png);
} 
 <form action="." method="get">
  <fieldset class="subcategory">
    <ul>
      <li class="has-x has-thing1">
        <input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing1" name="has[]" value="thing1">
        <label for="x_thing1">
        <div class="imageholder">amp;nbsp;</div>
        Thing1
      </label>
      </li>
      <li class="has-x has-thing2">
        <input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing2" name="has[]" value="thing2">
        <label for="x_thing2">
        <div class="imageholder">amp;nbsp;</div>
        Thing2
      </label>
      </li>
      <li class="has-x has-thing3">
        <input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing3" name="has[]" value="thing3">
        <label for="x_thing3">
        <div class="imageholder">amp;nbsp;</div>
        Thing3
      </label>
      </li>
    </ul>
  </fieldset>
  <div>
    <button type="submit">Submit</button></div>
  <button type="reset">Clear Selection</button>
</form>

Ответ №1:

Создайте флажки для очистки функций

   function clearAllCheckboxes(evt) {
    const formEl = evt.closest('form')
    const allCheckbox = formEl.querySelectorAll('[type=checkbox]')
    allCheckbox.forEach(checkbox => {
      checkbox.parentNode.style.outline = "0 none black"
    })
  }

Добавьте обработчик onClick к кнопке «Очистить выделение».

 <button type="reset" onClick="clearAllCheckboxes(this)">Clear Selection</button>

Комментарии:

1. Это то, чего я надеялся избежать, поскольку окончательная форма имеет не только (эквивалент) имеет-x, но также имеет-a, имеет-b, имеет-c и т. Д. Однако это может быть единственным выходом. Спасибо.

2. Ах! Конечно, в этом есть смысл. Спасибо!

Метки: