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

因此，当它尝试设置checked（不存在）的Check0属性时，会抛出错误并停止执行..

使用

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 demo

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

以上代码执行以下操作：

$('input: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，则以下代码将起作用，但如果您决定不使用它，则无法提供帮助。

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

仅选中一个复选框

3 个答案: