时间戳

首页 > 解决方案 > 全选复选框如何正常工作？

javascript - 全选复选框如何正常工作？

问题描述

我必须实现一个功能，其中我有几个单选按钮，当我点击一个单选按钮时，我会得到复选框，其中第一个复选框是“全选”。其余的复选框是几个选项。当我单击这些复选框中的任何一个时，应该会出现带有标签作为复选框名称的 5 星评级。

例如（很抱歉，我无法发布此 UI 图片）：

radiobutton1  radiobutton2

当我点击 radiobutton1

select_all check box
abc check box
pqr check box
xyz check box

这些复选框将显示。现在，如果我选择 pqr 复选框，就会出现带有“pqr”标签的 5 星评级。

pqr
star1 star2 star3 star4 star5

现在，如果我同时选中 pqr 复选框和 xyz 复选框，我将获得它们各自的评级：

pqr
star1 star2 star3 star4 star5

xyz
star1 star2 star3 star4 star5

如果我选择“全选”复选框，那么它下面的所有复选框都会被选中，并且相同的评级将会出现：

abc
star1 star2 star3 star4 star5

pqr
star1 star2 star3 star4 star5

xyz
star1 star2 star3 star4 star5

我编写了评级、单选按钮、复选框等所有内容的代码。但是我遇到了“全选”复选框的问题。（我的代码有很多其他变量，而且有点大，因为这个功能只是页面的一部分，所以我不会在这里发布我的代码）。另外，请注意这些选项（abc、pqr、xyz）是动态的并且来自后端。

<div class="db-checkbox skills_options select_all hidden"><input type="checkbox" id="sa" onClick="toggle(this)"><label for="sa">Select all skills</label></div>

<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="abc" name="abc" id="a"><label for="a">abc</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="pqr" name="pqr" id="p"><label for="p">pqr</label></div>
<div class="db-checkbox skills_options for_rating hidden"><input class = "skills_select" type="checkbox" value="xyz" name="xyz" id="x"><label for="x">xyz</label></div>

这是复选框的代码，全选复选框中的切换功能如下：

function toggle(source) {
  checkboxes = document.getElementsByClassName('skills_select');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

我写了两个点击功能，一个用于单个选项（当我单击abc, pqr, xyz以显示相应的评分时），另一个用于选择所有选项（当我单击时select all，显示所有选项的评分）。另外，请注意，对于每个单选按钮，都有它自己的复选框。

现在，我的问题是，当我点击时select all，所有选项都被选中，当我取消选择时select all，所有选项都被取消选中，但是，当我选择select all复选框，然后我取消选中它下面的任何选项时，select all复选框也应该不检查对吗？这样的事情没有发生，我不知道如何解决这个问题。您能否告诉我如何使select all复选框在 javascript 和 jquery 的所有场景中都能正常工作（当我选择select all，然后取消选中abc, pqr和/或xyz;select all应该取消选中，当我选择abc, pqr和xyz单独评分abc, pqr, xyz时现在当我点击select all，再次所有不应该出现（它对我来说是这样的，因为我写了两个 onclick 函数对吗？）；所有此类情况）。谢谢！

标签： javascripthtmljquery

解决方案

"when I select, select all check box, and then I uncheck any option under it, select all check box should also gets unchecked right?"

以下是您想要做的吗？顺便说一句，我删除了 ID 属性，因为它们是无效的，然后input在 中移动了label以将两者关联起来。

let checker=document.getElementById('checker');
let col=document.querySelectorAll('input.skills_select');

checker.addEventListener('click',function(e){
    col.forEach(n=>n.checked=this.checked);
});

col.forEach( n=>{
  n.addEventListener('click',function(e){
    if( !this.checked && checker.checked )checker.checked=false;
  })
})
<div class='db-checkbox skills_options select_all hidden'>
    <label><input type='checkbox' id='checker'>Select all skills</label>
</div>

<div class='db-checkbox skills_options for_rating hidden'>
    <label><input class='skills_select' type='checkbox' value='abc' name='abc'>abc</label>
</div>
<div class='db-checkbox skills_options for_rating hidden'>
    <label><input class='skills_select' type='checkbox' value='pqr' name='pqr' />pqr</label>
</div>
<div class='db-checkbox skills_options for_rating hidden'>
    <label><input class='skills_select' type='checkbox' value='xyz' name='xyz' />xyz</label>
</div>

推荐阅读