4

更新：

我的代码现在是这样的：（有效）。

   $(document).ready(function(){
         $("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
 });


          });

HTML：

     <input type="checkbox" name="swimming" class="chb" />
     <input type="checkbox" name="swimming" class="chb" />
     <input type="checkbox" name="swimming" class="chb" />

我有一个问卷类型表格，每个问题都有三个复选框，我希望用户只能选择三个中的一个。

我的 HTML 是这样的：

问题一：

             <input type="checkbox" name="ballet" />
             <input type="checkbox" name="ballet" />
             <input type="checkbox" name="ballet" />

问题2：

             <input type="checkbox" name="swimming" />
             <input type="checkbox" name="swimming" />
             <input type="checkbox" name="swimming" />

但这允许用户选择特定问题的所有复选框。我希望它能够从三个中只选择一个。有针对这个的解决方法吗？

谢谢

4

5 回答 5

16

演示在这里

$(':checkbox').on('change',function(){
 var th = $(this), name = th.attr('name'); 
 if(th.is(':checked')){
     $(':checkbox[name="'  + name + '"]').not(th).prop('checked',false);   
  }
});

根据评论，我假设用户必须能够选择前三个复选框中的一个和后三个复选框中的 1 个。因为名称属性不同。这是演示。 

 $("input:checkbox").change(function(){
 var group = ":checkbox[name='"+ $(this).attr("name") + "']";
   if($(this).is(':checked')){
     $(group).not($(this)).attr("checked",false);
   }
 });
于 2013-02-17T04:59:08.303 回答
7

您可以尝试使用 div。

 <div id="checkboxGroup">
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
<input type="checkbox" name="ballet" />
</div>

$('#checkboxGroup input[type=checkbox]').change(function() {
if (this.checked) {
    $('#checkboxGroup input[type=checkbox]').not(
                        $(this)).prop('checked', false);
    }
});

看小提琴

于 2014-01-21T05:02:24.420 回答
3

单选按钮是要走的路。如果需要，您还可以通过在该输入标签中添加单词“checked”作为属性来预先选择其中一个选项。

<input type="radio" name="ballet" value="1" checked />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />
于 2013-02-17T04:56:23.260 回答
2

这称为 HTML 单选按钮。单选按钮组合在一起，单选按钮的概念是一次只能选择一个组中的一个。

name属性是单选按钮组的名称。

<input type="radio" name="ballet" value="1" />
<input type="radio" name="ballet" value="2" />
<input type="radio" name="ballet" value="3" />

带有单选按钮等组的复选框

请注意，“x”是类，但“name”属性是您想要的组。

$(".x").click( function() {
    var n = $(this).attr('name');
    $("[name=" + n + ']').prop("checked", false);
    $(this).prop("checked", true);
});

<input type="checkbox" name="swimming" class="x" />
             <input type="checkbox" name="swimming" class="x" />
             <input type="checkbox" name="swimming" class="x" />

<br/>

<input type="checkbox" name="diving" class="x" />
             <input type="checkbox" name="diving" class="x" />
             <input type="checkbox" name="diving" class="x" />
于 2013-02-17T04:36:41.230 回答
0

对于复选框：

$("input:checkbox").click(function () {
    $("[name="+$(this).prop('name')+"]").prop("checked", false);
    $(this).prop("checked", true);
});

您可以改用收音机。

Fiddle For Checkboxes

于 2013-02-17T04:38:57.807 回答