如何更改復選框上的標簽樣式：已選中

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

它將檢查輸入的更改。 如果選中，則會添加一個類。 否則，該類將被刪除。