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;
}

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

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

1 个答案: