javascript - 如何设置相互影响的复选框组

Question

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

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

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

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

我只能考虑使用 javascript 检查点击时标记了哪些复选框，但想知道是否有更简单的方法我可能会遗漏。

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

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

Answer 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);   
});

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