仅选中一个复选框

Question

I have a checkbox Yes and No so i want to user only able to use one. 我有一个复选框，是和否，因此我希望用户只能使用一个。 So if user tick Yes then No will cleared if Yes then no will clear 因此，如果用户勾选是，则清除否，如果是，则清除否

    <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

The problem is that you are trying to access elements that do not exist 问题是您正在尝试访问不存在的元素

your loop goes from 0 to 4 but your elements are Check1 and Check2 您的循环从0到4，但是您的元素是Check1和Check2

So when it tries to set the checked property of Check0 ( which does not exist ) it throws an error and stops execution.. 因此，当尝试设置Check0的checked属性（ 不存在 ）时，它将引发错误并停止执行。

Use 采用

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

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

or if your example html is the actual one you could just change your loop to 或者如果您的示例html是实际的html，则可以将循环更改为

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

Answer 2

As mentioned by others, you are describing the behavior of a radio button. 正如其他人所提到的，您正在描述单选按钮的行为。 However, it is possible to make a checkbox behave like this also. 但是，也可以使复选框也具有这种行为。

jsFiddle demo jsFiddle演示

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

The above code does the following: 上面的代码执行以下操作：

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

This code uses the jQuery javascript library, so you must reference this library (usually in the head tags of the document), thus: 此代码使用jQuery javascript库，因此您必须引用此库（通常在文档的head标签中），因此：

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

Answer 3

It would be a lot more helpful/easier to use HTML5 for this part IF you choose HTML5 the following code WILL work but if you decide not to use it It wont help. 如果您选择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