Javascript 取消选中所有复选框

我目前正试图为一个潜在的网站制作一个过滤器

过滤器中有4个类别：

• 大陆
• 国家
• 竞争
• 日期

在这些类别中，每个类别都有一个复选框选项的选择。 在大陆选项中，它将始终具有：

• 欧洲
• 非洲
• 亚洲
• 北美
• 南美洲
• 澳大利亚/大洋洲

单击其中一个选项时，国家类别中将显示一个国家列表。当我点击其中一个国家时，在该国举行的足球比赛列表将出现在比赛部分

问题示例： 我选择了：

• 欧洲
• 英格兰
• 英超联赛
• 没有选择日期

然后我决定我不想看这个，并点击欧洲复选框删除所有选中的。然而，这并没有发生，所以当我取消了欧洲联赛，我如何取消英超和英格兰联赛的选择呢

Html代码：

<div id="container">
    <section id="accordion">
        <div>
            <input type="checkbox" id="check-1" />
            <label for="check-1">Continent</label>
                <form action="">
                    <table>
                    <tr>
                        <td>Europe</td><td> <input name="Continent" value="Europe" type="checkbox" onclick="showMe(value,name)"/></td> 
                        <td>Africa</td><td> <input name="Continent" value="Africa" type="checkbox" onclick="showMe(value,name)"/></td> 
                    </tr>
                    <tr>
                        <td>North America</td><td><input name="Continent" value="North_America" type="checkbox" onclick="showMe(value,name)"/></td> 
                        <td>Asia</td><td><input name="Continent" value="Asia" type="checkbox"  onclick="showMe(value,name)"/></td>                      
                    </tr>
                    <tr>
                        <td>Sorth America</td><td><input name="Continent" value="South_America" type="checkbox"  onclick="showMe(value,name)"/></td> 
                        <td>Australia / Oceania</td><td><input name="Continent" value="Austrilia_Oceania" type="checkbox"  onclick="showMe(value,name)"/></td>
                    </tr>     
                    </table>
                </form>
        </div>


        <div>
            <input type="checkbox" id="check-2" />
            <label for="check-2">Country</label>
            <form action="">
                <div id="Europe" hidden="hidden">
                        <table width="100%">
                            <tr>
                                <td>Spain</td><td><input name="Country" value="Spain" type="checkbox" onclick="showMe(value,name)"/></td>
                                <td>Germany</td><td><input name="Country"  value="Germany"type="checkbox" onclick="showMe(value,name)"/></td>
                            </tr>
                            <tr>
                                <td>England</td><td><input name="Country" value="England" type="checkbox" onclick="showMe(value,name)"/></td>
                                <td>Italy</td><td><input name="Country" type="checkbox"/></td>
                            </tr>

                            <tr>
                                <td>France</td><td><input name="Country" type="checkbox"/></td>
                                <td>Portugal</td><td><input name="Country" type="checkbox"/></td>
                            </tr>
                            <tr>
                                <td>Russia</td><td><input name="Country" type="checkbox"/></td>
                                <td>Ukraine</td><td><input name="Country" type="checkbox"/></td>
                            </tr>
                            <tr>
                                <td>Belgium</td><td><input name="Country" type="checkbox"/></td>
                                <td>Netherlands</td><td><input name="Country" type="checkbox"/></td>
                            </tr>
                        </table>
                </div>
                <div id="North_America" hidden="hidden" >
                    <table width="100%">
                        <tr>
                        <td>USA and Canada</td><td><input name="Country" value="USA_and_Canada" type="checkbox"/></td>
                        <td>Mexico</td><td><input name="Country" value="mexico" type="checkbox"/></td>
                    </table>
                </div>
            </form>
        </div>


        <div>
            <input type="checkbox" id="check-3" />
            <label for="check-3">League / Competition</label>
            <form action="">
                <div id="England" hidden="hidden">
                    <table>
                        <tr>
                            <td>Priemer League</td><td><input name="Competition" value="Priemer_league" type="checkbox"/></td>
                            <td>Capital One Cup</td><td><input name="Competition" value="Capital_One_Cup" type="checkbox"/></td>
                        </tr>
                        <tr>
                            <td>FA Cup</td><td><input name="Competition" value="FA_Cup" type="checkbox"/></td>
                            <td>Championship</td><td><input name="Competition" value="Championship" type="checkbox"/></td>
                        </tr>
                        <tr>
                            <td>League 1</td><td><input name="Competition" value="League1" type="checkbox"/></td>
                            <td>League 2</td><td><input name="Competition" value="League2" type="checkbox"/></td>
                        </tr>
                    </table>
                </div>

                <div id="Spain" hidden="hidden" >
                    <table width="100%">
                        <tr>
                            <td>La Liga</td><td><input name="Competition" value="La_Liga" type="checkbox"/></td>
                            <td>Copa del Rey</td><td><input name="Competition" value="Copa_Del_Rey" type="checkbox"/></td>
                        </tr>
                    </table>
                </div>

                <div id="Germany" hidden="hidden">
                    <table width="100%">
                        <tr>
                            <td>BundesLiga</td><td><input name="Competition" value="BundesLiga" type="checkbox"/></td>
                            <td>Bundesliga 2</td><td><input name="Competition" value="BundesLiga2" type="checkbox"/></td>
                        </tr>
                        <tr>
                            <td>3 Liga</td><td><input name="Competition" value="3Liga" type="checkbox"/></td>
                            <td>DFB Pokal</td><td><input name="Competition" value="DFB_Pokal" type="checkbox"/></td>
                        </tr>

                    </table>
                </div>
            </form>
        </div>

大陆
欧洲
非洲
北美
亚洲
南美洲
澳大利亚/大洋洲
国家
西班牙
德国
英格兰
意大利
法国
葡萄牙
俄罗斯
乌克兰
比利时
荷兰
美国和加拿大
墨西哥
联赛/比赛
首席联盟
首都一杯
足总杯
冠军地位
甲级联赛
联赛2
西甲
西班牙国王杯
德甲
德甲2
3西甲
德国杯

用于使复选框列表显示和取消显示的JS：

function showMe(value,name) {

    var chboxs = document.getElementsByName(name);
    var vis = "none";
    for(var i=0;i<chboxs.length;i++) { 
        if(chboxs[i].checked){
         vis = "block";
            break;
        }
    }
    document.getElementById(value).style.display = vis;
}

函数showMe（值、名称）{
var chboxs=document.getElementsByName（名称）；
var vis=“无”；
对于（var i=0；i1st，我想您可能希望使用单选按钮而不是复选框。（是否可以选择多个大陆、多个国家和多个比赛？或者仅选择其中一个？如果每个只有一个，则使用单选按钮）

无论如何，为了实现您想要的，您可以将事件侦听器添加到您的复选框change event，并且在激发时，检查是否应取消选中依赖复选框（通过依赖，我的意思是，例如，英格兰依赖于选择的欧洲），并隐藏必须隐藏的内容

顺便问一下，你在哪里和如何使用你的代码> SuMeMe/Cuff>函数？我只看到它的定义。也许你可以改变这个函数来实现你想要的
欢迎。所以，你应该考虑发布你的代码版本来重现你的问题。也许在JSFIDLE或者类似的地方。祝你好运！（最后加上我自己：）你是想用普通的Javascript来做这件事吗？是的，我只是在使用Javascript，因为它只是当前网站的一个可能修复的快速草案，我必须为我的大学课程做这个，它在某个时候会包含jquery，但现在我对它不熟悉，所以我尝试使用Javascript。showMe函数是在c点击heckbox，我也希望能够使用check按钮在用户选择的指定日期显示多个装置。但收听事件听起来不错，我会试一试，看看我是如何尝试的，如果您需要新代码的帮助，请告诉我们：）。此外，如果您能够使用JQuery使用它，您将不会后悔，因为它简化了您的许多工作