仅选中一个复选框

Question

我有一个复选框，是和否，因此我希望用户只能使用一个。 因此，如果用户勾选是，则清除否，如果是，则清除否

    <input type="checkbox" id="Check1" value="Value1" onclick="selectOnlyThis(this.id)" style="margin:1em 1em 5px 5px" @(ViewBag.Status == "Yes" ? " checked" : "")/>Yes

    <input type="checkbox" id="Check2" value="Value1" onclick="selectOnlyThis(this.id)" style="margin:1em 1em 5px 5px" @(ViewBag.Status == "No" ? " checked" : "")/>No

<script>

     function selectOnlyThis(id) {
                for (var i = 0; i <= 4; i++) {
                    document.getElementById("Check" + i).checked = false;
                }
                document.getElementById(id).checked = true;
            }

</script>

Answer 1

问题是您正在尝试访问不存在的元素

您的循环从0到4，但是您的元素是Check1和Check2

因此，当尝试设置Check0的checked属性（ 不存在 ）时，它将引发错误并停止执行。

采用

function selectOnlyThis(id) {
    console.log(id);
    for (var i = 0; i <= 4; i++) {
        var element = document.getElementById("Check" + i); // get element
        if (element){ // if element was found only the set its checked property
            document.getElementById("Check" + i).checked = false;
        }
    }
    document.getElementById(id).checked = true;
}

演示在http://jsfiddle.net/gaby/RHUVf/

或者如果您的示例html是实际的html，则可以将循环更改为

for (var i = 1; i <= 2; i++) {

Answer 2

正如其他人所提到的，您正在描述单选按钮的行为。 但是，也可以使复选框也具有这种行为。

jsFiddle演示

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

上面的代码执行以下操作：

$('input:checkbox') -选择类型为checkbox的所有输入元素
.not($(this)) -除了这一个
.prop('checked',false) -取消选中该复选框

此代码使用jQuery javascript库，因此您必须引用此库（通常在文档的head标签中），因此：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

Answer 3

如果您选择HTML5，则下面的代码将起作用，但是如果您决定不使用HTML5，则对本部分使用HTML5会更有用/更容易。

<input type="checkbox" name="<name>" value="<value"><*explanation*><br/><br/> 
            </form>
        </div>
    </div>
</body>

仅选中一个复选框

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-12-03 00:18:09

解决方案2
0 2013-12-03 00:10:57

解决方案3
0 2013-12-03 00:11:07

仅选中一个复选框

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-12-03 00:18:09

解决方案2 0 2013-12-03 00:10:57

解决方案3 0 2013-12-03 00:11:07

解决方案1
1 已采纳 2013-12-03 00:18:09

解决方案2
0 2013-12-03 00:10:57

解决方案3
0 2013-12-03 00:11:07