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

Question

I have searched for hours, and tried many things, but I can't get it to work. 我已经搜索了几个小时，并尝试了很多东西，但我无法让它工作。

This is my problem: I'm trying to make some sort of summary of a book series I enjoy, in html files and I want to be able to show/hide content based on a few checkboxes at the top of a page. 这是我的问题：我试图在html文件中对我喜欢的书系列进行某种总结，我希望能够根据页面顶部的几个复选框显示/隐藏内容。

So when I check only the "book 2" checkbox, no content from other books may appear. 因此，当我仅选中“书籍2”复选框时，不会显示其他书籍中的内容。

Secondly I want a check-all button, too. 其次，我也想要一个全包按钮。 For these 2 things I have 2 functions, and they do work independently, but when I click the check-all box, the content does not automatically appear, and I'm stuck to why that is. 对于这两件事我有2个功能，并且它们可以独立工作，但是当我点击check-all框时，内容不会自动出现，而且我坚持为什么会这样。

Here's my code (HTML): 这是我的代码（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>

And here's the attached JS file 这是附加的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;
    }   
}

I do apologize to sign up for this site just for this, but if someone could help me, I would be very gratefull. 我很抱歉为此注册此网站，但如果有人能帮助我，我会非常感激。 Thank you in advance! 先感谢您！

Answer 1

When you do the ToggleCheck(...) function it appears that the onchange event is not triggered. 当您执行ToggleCheck(...)函数时，似乎未触发onchange事件。 You can either trigger it manually inside this method by following this: How can I trigger an onchange event manually? 您可以通过以下方式在此方法中手动触发它：如何手动触发onchange事件？

or you can change the way you handle things a little bit and then call ShowHide(...) inside the for-loop in ToggleCheck(...) . 或者你可以改变你处理事物的方式，然后在ShowHide(...)的for循环中ToggleCheck(...) 。

This edit makes it work (using the first and easiest solution): 此编辑使其工作（使用第一个也是最简单的解决方案）：

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中的check-all框创建与内容相关的复选框？

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-09-01 00:22:35

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-01 00:22:35

解决方案1
2 已采纳 2015-09-01 00:22:35