Solution 1 :

Something like this

function changeColor(id, color){
  document.getElementById(id).style.backgroundColor = color;
}
function checked(id){
  if(document.getElementById(id).checked == true){
       changeColor(id, blue);
       var v = 100;
     }else if(document.getElementById('kind').checked == false){
       //other code
};};

You have to put the id in quotation marks and the color in quotation marks

Problem :

I have created checkbox using javascript and i am trying to change the color once the checkbox is clicked and if someone uncheck it goes back to previous state means in the original form and i have created the checkbox in dynamic way using javascript and here is the code i have tried to create a checkbox

<div id="checklist"></div>

and here is the javascript code

const checkboxArray = [];
const checkboxList = ['1','2','3]
      checkboxList.forEach((checkboxes) => {
        const checklist = document.getElementById("checklist");
        checklist.style.display = "inline-block";
        checklist.style.alignItems = "center";
        checklist.style.flexDirection = "row";
        const inputCheckbox = document.createElement("input");
        inputCheckbox.type = "checkbox";
        inputCheckbox.name = "checklist";
        inputCheckbox.id = checkboxes;

        let label = document.createElement("label");
        label.style.color = "#333333";
        inputCheckbox.style.backgroundColor = "#219653 !important";
        label.style.paddingTop = "35px";
        let text = document.createTextNode(checkboxes);
        label.htmlFor = checkboxes;

        label.appendChild(text);
        checklist.appendChild(inputCheckbox);
        checklist.appendChild(label);
        checklist.appendChild(document.createElement("br"));
        checkboxArray.push(inputCheckbox.id);
      });

and i am also try to change the color when someone clicked on select all button and here is the code for that
Select
all
and here is the function

 async function toggle(source) {
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');
  console.log(checkboxes);
  const checklistResponse = [];
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] != source) checkboxes[i].checked = source.checked;
  }

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i] != source) checkboxes[i].checked = false;
  }
  document.getElementById("selectAll").checked = false;
}

Comments

Comment posted by Kilian

You could use the

Comment posted by FZs

Why is

Comment posted by ramb tumber

@FZs i have to make the api request that’s why i am using async

Comment posted by ramb tumber

@Kilian i have used but no success

By