如何设置相互影响的复选框组答案

【问题标题】：How to set up groups of checkboxes which affect each other如何设置相互影响的复选框组
【发布时间】：2011-05-19 12:12:03
【问题描述】：

抱歉标题含糊不清，但很难将我想要做的事情浓缩成几句话。这正是我想要做的：

我想要一系列复选框组。一种是性别，有男性和女性复选框，一种是地区，有北方、东方、南方和西方等复选框。

目的是允许用户选择男性或女性，但只要他们选中另一个组的复选框，例如任何区域复选框，所有其他组的所有先前“检查”都将被删除。

重点是一次只允许用户从一组复选框中进行选择。

我只能想到使用 javascript 检查哪些复选框已在点击时被标记，但想知道是否有更简单的方法可能会丢失。

我还认为每个组的隐藏单选按钮可能会起作用。

如果有人有更优雅的解决方案，我很想听听。

【问题讨论】：

我总是为此走 Javascript 路线 - 即使使用单选按钮，您仍然需要在提交之前在 JS 中设置它们，所以是的 - 复选框点击事件的一些自定义逻辑就是你所需要的！

标签： javascript html checkbox

【解决方案1】：

我已经很久没有做任何纯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>

这里有a working example 可以玩。

你可以在 jQuery 中做同样的事情，就像

$('input:checkbox').click(function() {
    $(this).siblings(':checked').attr('checked', false);   
});

而且您无需担心浏览器兼容性问题。

【讨论】：

感谢您的回答。然而，这并不是我想要的——复选框应该在它们自己的组中正常工作。所以男性和女性应该都可以被选中，以及所有的区域组。不过，感谢您的先机。顺便说一句，我对 jQuery 没有任何反感，我更喜欢它而不是纯 JS 答案。可能应该在我原来的问题中提到它
设法弄明白了。我还不能回答我自己的问题，但这是小提琴jsfiddle.net/aeeN4谢谢你的帮助

【解决方案2】：

在恐惧星球的帮助下设法弄清楚了。现在看起来很简单。

这是 JSFiddle 的链接http://jsfiddle.net/aeeN4/

【讨论】：