【问题标题】:Checking Other Checkboxes when I Select a Checkbox - Not a "Select All" Checkbox当我选择一个复选框时检查其他复选框 - 不是“全选”复选框
【发布时间】:2020-10-12 17:17:38
【问题描述】:

我正在尝试创建一个顶部有一个复选框的表单,当用户选中该复选框时,会选择其他特定的复选框,但不是全部。我无法通过反复试验或搜索来找到答案。我唯一能找到的是“全选”选项。不是我想要的。

理想情况下,当用户选择“管理包”旁边的复选框时,我希望自动点击“Chrome 外观组”和“远程启动和安全警报”复选框,当然也可能点击其他复选框。

这是代码和我对它的基本尝试,但它不起作用。提前致谢。

HTML:

 
    特殊包
引擎选项

Javascript

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 是否有用。这只是我找到的另一个工作小提琴的复制和粘贴。

【问题讨论】:

    标签: javascript html forms


    【解决方案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?参考:stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
    • 您不能分配多个 onclick 处理程序。您应该分配一个并让它处理所有子点击。我会让它查看​​被点击的项目的 id 并使用它来确定孩子的班级。
    • 我稍微修改了代码以合并我上面的内容。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-19
    • 2020-10-02
    • 2018-08-05
    • 1970-01-01
    • 2013-10-11
    相关资源
    最近更新 更多