javascript 如何设置相互影响的复选框组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6058420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set up groups of checkboxes which affect each other
提问by magneticrob
Sorry for the ambiguous title, but it's quite hard to condense what I'm trying to do into a few words. Here's exactly what I'm trying to do:
对不起，标题含糊不清，但很难将我想要做的事情浓缩成几句话。这正是我想要做的：
I want to have a series of groups of checkboxes. One would be gender, with checkboxes for Male and Female, one would be Region, with checkboxes for North, East, South and West and so on.
我想要一系列复选框。一种是性别，带有男性和女性的复选框，一种是地区，带有北部、东部、南部和西部的复选框，依此类推。
The aim is to allow the user to select say, Male or Female, but as soon as they put a check in a checkbox of another group e.g. any of the Region checkboxes, all of their previous 'checks' from all other groups are removed.
目的是允许用户选择男性或女性，但是一旦他们选中另一个组的复选框，例如任何区域复选框，他们之前所有其他组的所有“选中”都将被删除。
The point is to only allow the user to select from one group of checkboxes at a time.
关键是只允许用户一次从一组复选框中进行选择。
I can only think of checking which checkboxes have been marked on click using javascript, but was wondering if there was a simpler way which I may be missing.
我只能考虑使用 javascript 检查哪些复选框在单击时被标记，但想知道是否有一种更简单的方法可能会遗漏。
I've also thought that maybe a hidden radio button for each group could work.
我还认为每个组的隐藏单选按钮可能会起作用。
If anyone has a more elegant solution I'm eager to hear it.
如果有人有更优雅的解决方案，我很想听听。
回答by fearofawhackplanet
Its been a long time since I've done any pure Javascript, libraries like jQuery make this kind of thing so easy. Anyway, something a bit like the following might work, you'd need to test it in a few browsers and tweak to what you need.
自从我完成任何纯 Javascript 以来已经很长时间了，像 jQuery 这样的库让这种事情变得如此简单。无论如何，有点像下面的东西可能会起作用，你需要在几个浏览器中测试它并调整到你需要的。
<form name="theForm">
<input type="checkbox" id="male" name="theGroup" onClick="clearGroup(this);">male
<input type="checkbox" id="female" name="theGroup" onClick="clearGroup(this);">female
<br />
<input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north
<input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south
<input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east
<input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west
</form>
<script>
function clearGroup(elem) {
var group = document.theForm.theGroup;
for (var i=0; i<group.length; i++) {
if (group[i] != elem) {
group[i].checked = false;
}
}
}
</script>
Here is a working exampleto play around with.
You could do the equivalent thing in jQuery as simply as
你可以在 jQuery 中做同样的事情，就像
$('input:checkbox').click(function() {
$(this).siblings(':checked').attr('checked', false);
});
and you have no browser compatibility issues to worry about.
并且您无需担心浏览器兼容性问题。
回答by magneticrob
Managed to figure it out with a little help from fearofawhack planet. Seems really simple now.
在恐惧星球的帮助下设法解决了这个问题。现在看起来真的很简单。
Heres a link to the JSFiddle http://jsfiddle.net/aeeN4/
这是 JSFiddle http://jsfiddle.net/aeeN4/的链接
