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

Question

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" ?

Answer 1

Explanation

Basically the steps you need to follow are

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

Gotcha to be aware of

1. Changing the background property via javascript will not change it back automatically when the input is unchecked
2. 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

1. Use the CSS input:checked + label and input + label classes to add your backgrounds
2. 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