Блог

Главная - Вопросы по программированию - как изменить цвет флажка, измененный при его установке?

как изменить цвет флажка, измененный при его установке?

#javascript #html

#javascript #HTML

Вопрос:

Я создал флажок с помощью javascript, и я пытаюсь изменить цвет после нажатия флажка, и если кто-то снимет флажок, он вернется к предыдущему состоянию, то есть в исходном виде, и я создал флажок динамическим способом с помощью javascript, и вот код, который я пытался создать флажок

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

и вот код javascript

 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);
      });

и я также пытаюсь изменить цвет, когда кто-то нажимает кнопку «Выбрать все», и вот код для этого
Выберите
все
, и вот функция

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

Комментарии:

1. Вы могли :checked бы использовать псевдокласс css для достижения своей цели

2. Почему это toggle асинхронно? Без await этого это не имеет смысла… Кроме того, вам не хватает цитаты в объявлении checkboxList . Это опечатка?

3. @FZs я должен сделать запрос api, поэтому я использую async

4. @Kilian я использовал, но безуспешно

Ответ №1:

Что-то вроде этого

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

Вы должны поместить идентификатор в кавычки, а цвет — в кавычки