根據檢查的輸入使用 javascript 更改父樣式

Question

我希望在選中復選框時更改父 label 的樣式。 我意識到這不可能用 CSS 來完成，這可以用 Javascript 來完成嗎？

 <label id="cont"> <span> <input type="checkbox" /> </span> </label>

Answer 1

是的，這是一個例子：

 const container = document.querySelector('#cont'); const checkbox = document.querySelector('input'); checkbox.addEventListener('change', () => { if (checkbox.checked) { container.style.background = 'red' } else { container.style.background = 'white' } })

 <label id="cont"> <span> <input type="checkbox" /> </span> </label>

Answer 2

你的問題有點不清楚。 如果您只有一個父元素和復選框，就像您的代碼所建議的那樣，那么這很簡單。 您可以在樣式表中定義新的 styles 您想要一個類（假設是一個名為新樣式的 class），然后在您的腳本中單擊復選框時添加一個偵聽器 function。 監聽器 function 基本上會將 class 插入到父級中（如果沒有的話），或者如果有的話將其刪除。 像這樣的東西。

<script>
  let checkbox = document.querySelector('input[type="checkbox"]');
  checkbox.onclick = function() {
    let parent = document.querySelector('#cont')
  parent.classList.toggle('new-style');
}
</script>

Answer 3

你試過這樣嗎？ 您可以為此使用 css:checked 屬性。

 input:checked + label { color: red; }

 <input id="name" type="checkbox"> <label for="name" id="cont"> label </label>