onchange 和 onreset 处理程序在重置时不更新 css 属性

Question

我有一个表单（我偶然在 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">&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">&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">&nbsp;</div>
        Thing3
      </label>
      </li>
    </ul>
  </fieldset>
  <div>
    <button type="submit">Submit</button></div>
  <button type="reset">Clear Selection</button>
</form>

Answer 1

创建函数 clearAllCheckboxes

  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>

onchange 和 onreset 处理程序在重置时不更新 css 属性

onchange and onreset handlers not updating css properties on reset

javascript

css

forms

onchange

reset