如何使用 JavaScript 中的全选框制作依赖于内容的复选框？答案

【问题标题】：How can I make content-dependent checkboxes, with a check-all box in JavaScript?如何使用 JavaScript 中的全选框制作依赖于内容的复选框？
【发布时间】：2015-09-01 00:14:56
【问题描述】：

我已经搜索了几个小时，并尝试了很多东西，但我无法让它工作。

这是我的问题：我正在尝试在 html 文件中对我喜欢的系列丛书进行某种总结，并且我希望能够根据页面顶部的几个复选框来显示/隐藏内容.

因此，当我仅选中“书 2”复选框时，可能不会出现其他书的内容。

其次，我也想要一个全选按钮。对于这 2 件事，我有 2 个功能，它们确实独立工作，但是当我单击全选框时，内容不会自动出现，我不知道为什么会这样。

这是我的代码 (HTML)：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="Scripts.js"></script>
    </head>
<body>
    <p> <input type="checkbox" onchange="ToggleCheck(this);"> Check all</p>
    <p> <input type="checkbox" name="bookbox" onchange="ShowHide('Book0', this);"> Book 0</p>
    <p> <input type="checkbox" name="bookbox" onchange="ShowHide('Book1', this);"> Book 1</p>
    <p> <input type="checkbox" name="bookbox" onchange="ShowHide('Book2', this);"> Book 2</p>
    <p> <span class="Book0">Book 0 content. </span>
        <span class="Book1">Book 1 content. </span>
        <span class="Book2">Book 2 content. </span>
        <span class="Book1">Book 1 content. </span>
    </p>
</body>
</html>

这是附加的 JS 文件

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

function ShowHide(a, b) {
    var vis = (b.checked) ? "inline" : "none";
    var book = document.getElementsByClassName(a);
    for (var i = 0; i < book.length; i++) {
        book[i].style.display = vis;
    }   
}

我很抱歉为此注册该网站，但如果有人可以帮助我，我将非常感激。提前谢谢！

【问题讨论】：

如果它解决了你的问题，别忘了标记答案！
而不是"inline" : "none"，考虑"" : "none"，以便元素在可见时采用其默认或继承样式，这样您就可以在不知道其显示值的情况下显示和隐藏不同类型的元素。

标签： javascript checkbox onchange

【解决方案1】：

当您执行ToggleCheck(...) 函数时，似乎未触发 onchange 事件。您可以按照以下方法在此方法中手动触发它：How can I trigger an onchange event manually?

或者你可以稍微改变你处理事情的方式，然后在ToggleCheck(...)的for循环中调用ShowHide(...)。

这个编辑使它起作用（使用第一个也是最简单的解决方案）：

function ToggleCheck(source) {
    var checkboxes = document.getElementsByName('bookbox');
    for (var i = 0, n = checkboxes.length; i < n; i++) {
        checkboxes[i].checked = source.checked;
        checkboxes[i].onchange(); //manual trigger of the onchange event
    }
}

【讨论】：