¿Cómo puede Javascript cambiar las propiedades CSS de input:checked
CSS
.switch-field input:checked + label { background-color: #018786; color:white; box-shadow: none; }Digamos que quiero cambiar su color de fondo-
JS
document.getElementsByClassName("switch-field input:checked")[0].style.background= #4400ff;¿Cómo puedo apuntar a esa "clase" específica con "entrada verificada"?
Puede usar querySelector para un solo elemento o querySelectorAll para varios elementos. Puede usar la consulta CSS en eso.
document.querySelector("switch-field input:checked").style.background = "#4400ff";Básicamente los pasos que debes seguir son
input:checked + label (ese es el elemento que tiene la propiedad de color de fondo)onChange de la input para asegurarse de que establece los fondos correctamente al verificar y desmarcar la entradainput:checked + label y input + label de CSS para agregar tus fondosconvention y, por lo general, se considera una mala práctica si se puede evitar. function clickHandle() { // Clear all the labels background style property to ensure it resets to the css class background property clearLabelBackground(); // Get all the labels (not input) based on the css input:checked flag // We are getting the label because that if the element which has the background color property you want to change var selectedLabels = document.querySelectorAll("input:checked + label"); // Loop through each of the fetched labels selectedLabels.forEach((label)=>{ // Change the background color style label.style.background="#4400ff"; }); } function clearLabelBackground() { // Get all the labels (not input) regardless of the selection // We are getting the label because that if the element which has the background color property you want to change var selectedLabels = document.querySelectorAll("input + label"); // Loop through each of the fetched labels selectedLabels.forEach((label)=>{ // Remove the background color style label.style.background=""; }); } .switch-field input:checked + label { background-color: #018786; color:white; box-shadow: none; } <div class="switch-field"> <input type="checkbox"/> <label>Item 1</label> </div> <div class="switch-field"> <input type="checkbox"/> <label>Item 2</label> </div> <div class="switch-field"> <input type="checkbox"/> <label>Item 3</label> </div> <div class="switch-field"> <input type="checkbox"/> <label>Item 4</label> </div> <button onclick="clickHandle()">Change BG</button>He comentado el código javascript, si necesita más aclaraciones, no dude en comentar esta respuesta