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

Question

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

这是我的问题：我正在尝试在 html 文件中对我喜欢的系列丛书做一些总结，我希望能够 show/hide 内容基于页面顶部的几个复选框。

所以当我只勾选"book 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;
    }   
}

我很抱歉为此注册了这个网站，但如果有人能帮助我，我将不胜感激。提前致谢！

Answer 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
    }
}

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

How can I make content-dependent checkboxes, with a check-all box in JavaScript?

javascript

checkbox

onchange