2011-04-15 70 views
1

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

+0

你能更具体吗?复选框并不真正具有“多选”。这是一个具有两种可能状态的单一元素,已选中或未选中。也许你正在寻找单选按钮? – David 2011-04-15 14:05:02

+3

改为使用单选按钮? – 2011-04-15 14:05:43

回答

7

您应该将其更改为单选按钮而不是复选框!

<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

如果你想只有一个复选框,在同一时间得到选中,那么它能够更好地使用radiobutton代替。

1

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

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

通过使用此,只有1个选项,可以在同一时间

2

我有地方,我需要使用复选框的使用情况进行检查 - 它不同于单选按钮,允许用户取消选中...下面是一些我从另一个计算器用户拼凑起来的一个例子:

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

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

0

使用无线电,他们必须有相同的name=""