Question

我正在遍历一个输出不确定数量的复选框的结构-我正在寻找一种方法，一旦选中1个复选框，则将未选中的复选框的标签涂成灰色

我看到了许多禁用复选框的示例，但这不是我所需要的，因为我希望为标签过滤系统检查多个复选框的选项

对JS很陌生，我真的不知道从哪里开始

有人有什么建议或可以推荐任何资源/文档吗？

var label = document.getElementsByTagName('label');
var checkbox = document.getElementsByTagName('input[type=ckeckbox]');

<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>

Answer 1

如果您不介意在未选中任何复选框时将复选框显示为灰色，则可以使用:checked CSS伪类轻松地做到这一点

<style>
    .greyCheckbox+label {
        color: grey;
    }

    .greyCheckbox:checked+label {
        color: black;
    }
</style>

<input class="greyCheckbox" type="checkbox" value="" id="chk1" />
<label for="chk1">
    Label Here
</label>
<input class="greyCheckbox" type="checkbox" value="" id="chk2" />
<label for="chk2">
    Label Here
</label>
<input class="greyCheckbox" type="checkbox" value="" id="chk3" />
<label for="chk3">
    Label Here
</label>
<input class="greyCheckbox" type="checkbox" value="" id="chk4" />
<label for="chk4">
    Label Here
</label>

此处演示：https://jsfiddle.net/4hc5dyvk/

否则，您可以绑定已更改的事件并在应用第一个复选框后应用新的类。

Answer 2

我认为您正在寻找这个：

// select all labels and checkboxes
var label = document.querySelectorAll('label');
var checkbox = document.querySelectorAll('input[type="checkbox"]');

// iterate to each checkbox
checkbox.forEach((cb, i)=>{
    // bind clicking event
    cb.addEventListener('click', ()=>{
      if(cb.checked){
        // click
        checkbox.forEach(cbb=>{
          if(cbb !== cb){
            // uncheck all others
            cbb.checked = false;
          }
        });
        // set the checked to black
        label[i].style.color = 'black';
        // iterate the labels
        label.forEach((lb, k)=>{
          if(k !== i){
            // set labels other than current one to grey
            lb.style.color = 'grey';
          }
        })
      }else{
        // unclick
        // set the unchecked label to grey
        label[i].style.color = 'grey';
      }
    });
})

<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>

Answer 3

这是我为您解决的问题

var label = document.getElementsByTagName('label');
var checkboxes = document.querySelectorAll("input");
checkboxes.forEach(check => check.addEventListener("change", grayout.bind(null,check)))


function grayout(box) {

   if(!Array.from(checkboxes).some(checkbox => checkbox.checked)) return checkboxes.forEach(checkbox => checkbox.parentElement.style.color = "black");
   checkboxes.forEach(checkbox => {
      if(checkbox.checked) return checkbox.parentElement.style.color = "black";
      checkbox.parentElement.style.color = "grey";
   })
}

<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>

Answer 4

从您的角度来看，这是最简单的解决方案：

// select all labels and checkboxes
var label = document.querySelectorAll('label');
var checkbox = document.querySelectorAll('input[type="checkbox"]');

checkbox.forEach(item => {
  item.addEventListener('click', event => {
    if(item.checked){
      item.parentElement.style.color='grey';
    }
    else{
      item.parentElement.style.color='black';
    }
  })
})

<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>
<label><input type="checkbox" value="" id=""/>Label Here</label>

单击复选框时，如何使未选中的复选框标签变灰？

4 个答案: