如果选中，则更改输入的背景颜色

Question

我正在尝试写一些内容，如果选中输入复选框，则更改该输入框的相关标签的背景颜色。如果选中，则应为红色，否则所有其他都具有其常规颜色。当我单击其他输入时，如何取消选中其他输入？所有实际输入都显示为无，所以我想更改标签的样式。

document.querySelectorAll(".main-container__checkbox").forEach((item) => {
  if (item.checked) {
    document.querySelectorAll(
      ".main-container__checkbox-label"
    ).style.backgroundColor = "red";
  }
});

显然这只会让每个标签的背景颜色变成红色，但我不知道如何让被选中的标签变成红色

 <input
          id="main-checkbox-1"
          type="checkbox"
          class="main-container__checkbox"
          checked
        />
        <input
          id="main-checkbox-2"
          type="checkbox"
          class="main-container__checkbox"
        />
        <input
          id="main-checkbox-3"
          type="checkbox"
          class="main-container__checkbox"
        />

       
          <label for="main-checkbox-1" class="main-container__checkbox-label"
            >&nbsp;</label
          >
          <label for="main-checkbox-2" class="main-container__checkbox-label"
            >&nbsp;</label
          >
          <label for="main-checkbox-3" class="main-container__checkbox-label"
            >&nbsp;</label
          >

Answer 1

如果您修改您的 html 以使标签环绕输入 - 然后将文本放在一个跨度中 - 在输入复选框之后，那么您可以单独使用 css 来实现这一点 - 使用 :checked 伪选择器和“ +" 直接同级组合子。

这有一个额外的好处是可以点击标签文本并切换复选框的选中状态。

然后您可以更进一步，隐藏复选框输入并将标签样式设置为看起来像一个按钮，这样您就有了一个功能齐全且有效的切换开关。

编辑 - 请注意在原始帖子中 - 您提到输入是“显示：无”，然后我遵循了这一点，并使这些输入像切换按钮一样。

label {
  display: block;
  padding: 10px;
  
}

label input {
 display: none;
}
.checkbox-label {
  background-color: #fff;
  color: #222;
  padding: 5px 10px;
  cursor: pointer;
  border: solid 1px #6e6e6e;
  border-radius: 4px;
  margin-bottom: 10px
}

input:checked + .checkbox-label {
  background-color: red;
  color: #fff;
}

<p> click the following to toggle the hidden checkboxes - if the checkbox is checked - the label background will be red <p>

<label>
   <input
    id="main-checkbox-1"
    type="checkbox"
    class="main-container__checkbox"
    checked
    />
    <span class="checkbox-label">main-checkbox-1</span>
 </label>
  
 <label>
   <input
    id="main-checkbox-2"
    type="checkbox"
    class="main-container__checkbox"
    />
    <span class="checkbox-label">main-checkbox-2</span>
 </label>
 
  <label>
   <input
    id="main-checkbox-3"
    type="checkbox"
    class="main-container__checkbox"
    />
    <span class="checkbox-label">main-checkbox-3</span>
 </label>

Answer 2

使用 javascript，您可以使用事件侦听器实现相同的目的。添加了内联 cmets 以便于理解

// getting all the checkbox , iterating to add event listener 
document.querySelectorAll(".main-container__checkbox").forEach((item) => {
  // calling the function to pass the current element under iteration
  addBackGround(item);
  // adding event listener to the checkbox so on change it will add/remove the background color
  item.addEventListener('change', function(e) {
    // e is event object, e.target is the element on which any event occured
    addBackGround(e.target)
  })

})
// a function which will add the back ground color
function addBackGround(item) {
  // getting the id of the element 
  const elemId = item.getAttribute('id');
  // finding the label using attribute selector
  const labelElement = `label[for=${elemId}]`;
  // if checkbox is checked then add background color
  if (item.checked) {
    document.querySelector(labelElement).style.backgroundColor = "red";
  } else {
    document.querySelector(labelElement).style.backgroundColor = "";
  }
}

<input id="main-checkbox-1" type="checkbox" class="main-container__checkbox" checked />
<label for="main-checkbox-1" class="main-container__checkbox-label">
main-checkbox-1
</label>
<input id="main-checkbox-2" type="checkbox" class="main-container__checkbox" />
<label for="main-checkbox-2" class="main-container__checkbox-label">main-checkbox-</label>
<input id="main-checkbox-3" type="checkbox" class="main-container__checkbox" />
<label for="main-checkbox-3" class="main-container__checkbox-label">main-checkbox-3</label>