检查子输入时更改父块背景（vanilla js）

Question

我是编码世界的新手，非常感谢您提供建议或任何想法。 我想知道当检查子输入时是否可以更改当前父块背景（.checkbox-container）的颜色。 主要问题是我有多个带有输入的块，并且只需要将背景颜色更改为当前块，而不是全部？ 据我了解，没有没有标记更改的纯 css 解决方案，但这不是我的情况。 有人可以告诉我如何在 vanilla js 中做到这一点吗？

这是小提琴的链接：

https://jsfiddle.net/william_eduards/r4jxvuz5/4/

和这里的可视代码示例：

 .checkbox-container { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; background: #E8EBF0; border: 1px solid #E8EBF0; transition: background.3s ease-in-out; margin-bottom: 8px; border-radius: 4px; }

 <div class="dimensional-container checkbox-container"> <input type="checkbox" name="snapchat" class="checkbox-container__snapchat" id="snapchat"> <label for="snapchat">snapchat</label> </div> <div class="dimensional-container checkbox-container"> <input type="checkbox" name="facebook" class="checkbox-container__facebook" id="facebook"> <label for="facebook">Facebook</label> </div> <div class="dimensional-container checkbox-container"> <input type="checkbox" name="hangouts" class="checkbox-container__hangouts" id="hangouts"> <label for="hangouts">hangouts</label> </div>

Answer 1

• 使用querySelectorAll查找所有input 。
• 循环所有输入和addEventListener
• 检查是否使用e.target.checked检查元素，如果检查，则更改其父e.target.parentElement背景style 。

我用的是red ，你可以自己用 select 颜色。

 const allInputs = document.querySelectorAll("input"); allInputs.forEach(input => { input.addEventListener("click", e => { if (e.target.checked) { e.target.parentElement.style.background = "#ff0000"; } else { e.target.parentElement.style.background = "#E8EBF0"; } }) })

 .checkbox-container { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; background: #E8EBF0; border: 1px solid #E8EBF0; transition: background.3s ease-in-out; margin-bottom: 8px; border-radius: 4px; }

 <div class="dimensional-container checkbox-container"> <input type="checkbox" name="snapchat" class="checkbox-container__snapchat" id="snapchat"> <label for="snapchat">snapchat</label> </div> <div class="dimensional-container checkbox-container"> <input type="checkbox" name="facebook" class="checkbox-container__facebook" id="facebook"> <label for="facebook">Facebook</label> </div> <div class="dimensional-container checkbox-container"> <input type="checkbox" name="hangouts" class="checkbox-container__hangouts" id="hangouts"> <label for="hangouts">hangouts</label> </div>