当我选择一个复选框时检查其他复选框 - 不是“全选”复选框
Posted
技术标签:
【中文标题】当我选择一个复选框时检查其他复选框 - 不是“全选”复选框【英文标题】：Checking Other Checkboxes when I Select a Checkbox - Not a "Select All" Checkbox 【发布时间】：2020-10-12 17:17:38 【问题描述】：我正在尝试创建一个顶部有一个复选框的表单，当用户选中该复选框时，会选择其他特定的复选框，但不是全部。我无法通过反复试验或搜索来找到答案。我唯一能找到的是“全选”选项。不是我想要的。
理想情况下，当用户选择“管理包”旁边的复选框时，我希望自动点击“Chrome 外观组”和“远程启动和安全警报”复选框，当然也可能点击其他复选框。
这是代码和我对它的基本尝试，但它不起作用。提前致谢。
html：
var all_check = document.getElementsByName('pkg');
main_check.onchange = checkAll;
for (var i = 0; i < all_check.length; i++)
all_check[i].onchange = childChanged;
function checkAll()
for (var i = 0; i < all_check.length; i++)
all_check[i].checked = main_check.checked;
function childChanged()
if (!this.checked)
main_check.checked = false;
return;
// Check if main checkbox should be checked
for (var i = 0; i < all_check.length; i++)
if (!all_check[i].checked) return;
main_check.checked = true;
我不知道这个 Javascript 是否有用。这只是我找到的另一个工作小提琴的复制和粘贴。
【问题讨论】：
【参考方案1】：我只需将一个类添加到您要使其具有反应性的复选框中，然后在 onclick 中设置它们，如下所示：
var parents = document.getElementsByClassName("has-children");
for (var i = 0; i < parents.length; i++)
parents[i].onclick = checkChildren;
function checkChildren()
var parent_id = this.getAttribute('id');
var status = this.checked;
var children = document.getElementsByClassName("part-of-" + parent_id);
Array.prototype.forEach.call(children, function(child, index)
child.checked = status;
);
<input type="checkbox" id="admin" class="has-children"> Admin <br>
<input type="checkbox" id="remote" class="has-children"> Remote <br>
<input type="checkbox" id="chrome-group" class="part-of-admin"> Chrome Group <br>
<input type="checkbox" id="remote-start" class="part-of-admin part-of-remote"> Remote Start<br>
<input type="checkbox" id="remote-start" class="part-of-admin part-of-remote"> Remote Control<br>
<input type="checkbox" id="another"> Not part of admin<br>【讨论】：
我会在插入后尝试一下，但是如果我可以为 1 个输入提供 2 个类，你知道吗？就像“部分越野”作为二等舱一样，因为其中一些选项会有结转。 当然。你可以有基本上无限的类，用空格分隔 好吧，我试过了，但它不起作用。在阅读了更多内容之后，我认为多个“onclick”功能存在问题。如您所见，我已经有 1 个“onclick”功能。我是否只需将此 javascript 添加到同一个文件并将它们更改为 addEventListener？参考：***.com/questions/6348494/addeventlistener-vs-onclick 您不能分配多个 onclick 处理程序。您应该分配一个并让它处理所有子点击。我会让它查看被点击的项目的 id 并使用它来确定孩子的班级。 我稍微修改了代码以合并我上面的内容。以上是关于当我选择一个复选框时检查其他复选框 - 不是“全选”复选框的主要内容，如果未能解决你的问题，请参考以下文章
如何从 jQuery DataTable 中的所有页面中选择所有复选框
DataTables 1.10 全选复选框以选择所有行，甚至是带有分页的隐藏行
js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false