Question

对于模棱两可的标题感到抱歉，但很难将我想要做的事情压缩成几句话。这正是我想要做的：

我希望拥有一系列复选框。一个是性别，有男性和女性的复选框，一个是Region，带有北，东，南和西的复选框等。

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

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

我只能考虑使用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);   
});

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

Answer 2

通过恐惧行星的一点帮助来管理它。现在看起来很简单。

这是一个指向JSFiddle http://jsfiddle.net/aeeN4/

的链接

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

2 个答案: