我目前正在尝试为潜在网站制作过滤器。
过滤器中的有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>
用于制作复选框列表的JS＆amp; dissappear：
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;
}
这里有一个JSBin。
答案 0 :(得分：0)
第一，我想你可能想要使用radiobutton而不是复选框。 （是否可以选择多个大洲，多个国家和多个比赛？或者只有1个？如果每个只有1个，那么使用无线电按钮）
无论如何，为了完成你想要的东西，你可以在你的复选框更改事件中添加一个事件监听器，一旦被触发，检查是否应该取消选中依赖复选框（依赖于我的意思，例如，英格兰依赖于欧洲被选中） ，并隐藏必须隐藏的内容。
顺便问一下，您在何处以及如何使用showMe功能？我只看到了它的定义。也许你可以改变同样的功能来实现你想要的目标