Question

0

148

Vistas

How to target ".switch-field input:checked" to make changes in CSS properties with JavaScript

How can Javascript change CSS properties of input:checked

CSS

   .switch-field input:checked + label {
    background-color: #018786;
    color:white;
    box-shadow: none;
}

Lets say I want to change its background color-

JS

document.getElementsByClassName("switch-field input:checked")[0].style.background= #4400ff;

How can i target that specific "class" with "input checked" ?

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-01T00:26:39.904Z

You can use querySelector for single element or querySelectorAll for multiple elements. You can use CSS query in that.

document.querySelector("switch-field input:checked").style.background = 
 "#4400ff";

Answer 2 · 2022-07-01T00:26:39.912Z

Explanation

Basically the steps you need to follow are

Clear all the label background style property
Select all the input:checked + label (thats the element which has the background color property)
Loop through all the fetched labels
Change the background color to what you want

Gotcha to be aware of

Changing the background property via javascript will not change it back automatically when the input is unchecked
You will need to run a clear/update function on the input's onChange event to ensure it sets the backgrounds properly on checking an unchecking the input

Suggestions

Use the CSS input:checked + label and input + label classes to add your backgrounds
Always try to avoid javascript manipulation of styles, it's against the convention and usually considered as bad practice if it can be avoided

Solution

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>

I have commented the javascript code, if you need more clarification, feel free to comment on this answer

0

148