javascript - 仅选中一个复选框

Question

我有一个复选框是和否，所以我希望用户只能使用一个。因此，如果用户勾选"is"，则“否”将被清除，如果"is"，则“否”将被清除

    <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 是实际的，您可以将循环更改为

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