如何使用JavaScript中的复选框来创建与内容相关的复选框？

我找了好几个小时，尝试了很多东西，但都没能成功

这就是我的问题：我试图用html文件对我喜欢的一系列书籍进行某种形式的总结，我希望能够根据页面顶部的几个复选框显示/隐藏内容

因此，当我只选中“book 2”复选框时，可能不会显示其他书籍的内容

其次，我还想要一个全选按钮。对于这两件事，我有两个函数，它们是独立工作的，但当我单击复选框时，内容不会自动出现，我一直在想这是为什么

以下是我的代码（HTML）：

试验
全部检查

第0册

第一册

第二册

第0册内容。
第1册内容。
第2册内容。
第1册内容。

这是附加的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;
    }   
}

函数切换检查（源代码）{
var复选框=document.getElementsByName（'bookbox'）；
对于（var i=0，n=checkboxes.length；i当您执行
ToggleCheck（…）
函数时，似乎未触发onchange事件。您可以在此方法内通过以下方式手动触发它：

或者您可以稍微改变处理事情的方式，然后在for循环中调用
ToggleCheck（…）

此编辑使其工作（使用第一个也是最简单的解决方案）：

函数切换检查（源代码）{
var复选框=document.getElementsByName（'bookbox'）；
对于（变量i=0，n=checkbox.length；i< /代码>如果解决了问题，不要忘记标记答案，而不是<代码>“内联”：“没有”<代码>，考虑“代码>”：“没有”< /代码>，以便元素在可见时采用默认或继承样式，这样您就可以在不知道它们的显示值的情况下显示和隐藏不同类型的元素。
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;
    }   
}

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