如何更改复选框上的标签样式：已选中

Question

我目前正在构建一个在标签内包含复选框的表单。我们这样做是因为我们需要将原始复选框交换为图像。但是，当复选框被选中时，我们需要让标签有一个边框来给一些用户反馈。

这是标签/复选框的设置

<div class="one_column">
    <label for="fieldname2_1_cb0">
      <input name="fieldname2_1[]" id="fieldname2_1_cb0" class="field depItem group  required" value="Alloy Wheel(s)" vt="Alloy Wheel(s)" type="checkbox"> <span>Alloy Wheel(s)</span>
    </label>
</div>

我们已经尝试过使用以下方法，但显然不起作用

label input[type="checkbox"]:checked + label {
border: 5px solid blue;
}

任何帮助将不胜感激！

我已经使用下面提供的代码成功完成了第一个复选框

    window.onload=function() {
  document.querySelector('input[type="checkbox"]').addEventListener('change', 
  function() {
      if (this.checked) {
      this.parentNode.classList.add('border-blue');
      } else {
        this.parentNode.classList.remove('border-blue');
      }
   })}

但是，它只改变了第一个复选框...总共有 10 个都遵循与上述相同的结构

Answer 1

使用 CSS，无法从子元素中选择父元素。

如果允许使用 JavaScript，可以这样解决：

document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
  el.addEventListener('change', function() {
    if (this.checked) {
      this.parentNode.classList.add('border-blue');
    } else {
      this.parentNode.classList.remove('border-blue');
    }
  })
})

.border-blue {
  border: 5px solid blue;
}

它将检查输入的变化。如果选中，将添加一个类。否则，该类将被删除。