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

CodePudding user response：

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

CodePudding user response：

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 >
  <input type="checkbox"/>
  <label>Item 1</label>
</div>
<div >
  <input type="checkbox"/>
  <label>Item 2</label>
</div>
<div >
  <input type="checkbox"/>
  <label>Item 3</label>
</div>
<div >
  <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