如何阻止用户在HTML中选择多个复选框?

时间:2011-04-15 14:02:25

标签: html checkbox

如何阻止用户在HTML中选择多个复选框?

5 个答案:

答案 0 :(得分:8)

你应该把它改成单选按钮而不是复选框!

<input type="radio" name="group1" id="item1" value="Milk">
<label for="item1">Milk</label>
<br/>
<input type="radio" name="group1" id="item2" value="Butter" checked>
<label for="item2">Butter</label>
<br/>
<input type="radio" name="group1" id="item3" value="Cheese">
<label for="item13">Cheese</label>

答案 1 :(得分:2)

我有一个用例,我需要使用复选框 - 与单选按钮不同,它允许用户进行UNcheck ...这是我从另一个stackoverflow用户拼凑的一个例子:

<head>
    <meta charset=utf-8 />
    <title>and-or checkboxes</title>
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>

<body>

    <label for="checkbox1"><input type="checkbox" id="checkbox1" name="checkbox1" value="and" </label><span id="span_and">checkbox1</span><br>

    <label for="checkbox2"> <input type="checkbox" id="checkbox2"  name="checkbox2"  value="or" </label><span id="span_or">checkbox2</span>

    <script>

        $(document).ready(function(){
            $('#checkbox1').click(function() {
            var checkedBox = $(this).attr("checked");
                if (checkedBox === true) {
                    $("#checkbox2").attr('checked', false);
                } else {
                    $("#checkbox2").removeAttr('checked');                    
                }
            });
        });

        $(document).ready(function(){
            $('#checkbox2').click(function() {
            var checkedBox = $(this).attr("checked");
                if (checkedBox === true) {
                    $("#checkbox1").attr('checked', false);                     
                } else {
                    $("#checkbox1").removeAttr('checked');                       
                }
            });
        });

    </script>

</body>

通过一些工作,您可以将一个/两个脚本组合到一个脚本中。你现在可能不需要这个,但我想发布它,因为它对我非常有用。

答案 2 :(得分:1)

如果您希望一次只选中一个复选框,则最好使用radiobutton

答案 3 :(得分:1)

如果您的意思是您不希望同时检查来自同一“逻辑组”的多个复选框,则应使用单选按钮而不是复选框。

<form>
    <input type="radio" name="aGroup" value="choice1" /> Choice #1<br />
    <input type="radio" name="aGroup" value="choice2" /> Choice #2
</form>

通过使用它,一次只能检查一个选项

答案 4 :(得分:0)

使用广播,它们必须具有相同的name=""