只选择三个具有相同名称的复选框

Question

更新:

我的代码现在是这样的:(工作).

   $(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是这样的:

问题1:

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

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

谢谢

Answer 1

在这里演示

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

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

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

Answer 2

你可以尝试使用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);
    }
});

看到小提琴