2013-08-18 189 views
0

我有一个复选框的表,并且我只希望在每行中检查三个中的一个。我编写了一个代码,它对每一行都很好,但是当我检查第二行的复选框时,第一行复选框会被取消选中。只有三个复选框中的每一个复选框可用复选框检查可用jQuery检查

您可以检查http://jsfiddle.net/annakoutli/Zp4d5/1/

这里的代码是HTML

  <td class="col_featured-ad"><input type="checkbox" id="featured3_ad2" class="radio2 price featured3" value="featured3_ad2" name="featured_ad2" /> 
      </td> 
      <td class="col_featured-ad"><input type="checkbox" id="featured7_ad2" class="radio2 price featured7" value="featured7_ad2" name="featured_ad2" /> 
       </td> 
      <td class="col_featured-ad"><input type="checkbox" id="featured15_ad2" class="radio2 price featured15" value="featured15_ad2" name="featured_ad2" /> 
       </td> 
      </tr> 

这里是jQuery

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

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

有什么建议吗?谢谢大家。

回答

1

除了复选框的使用到位单选按钮的

$('input.radio2:checkbox').click(function(){ 
    var $chk = $(this), $group = $chk.closest('tr').find('input.radio2:checkbox'); 
    if(this.checked){ 
     $group.not(this).prop('checked', false); 
    } 
}); 

演示:Fiddle

+1

+ +1为开发人员提供解决方案时应该真正地向谁不懂单选按钮的人大喊大叫。 –

+0

非常感谢您的回答。我做了我的工作,以及你可以在这里查看http://jsfiddle.net/annakoutli/Zp4d5/2/ – user2693896

1

我的建议是你错误地使用了复选框。复选框应该用来选择多个元素。如果您只想要选择一个元素,那么您应该使用单选按钮,这些按钮是专门为此案例设计的。那么你将不需要使用任何JavaScript。

+0

是的,你是对的这件事,我想到这点。但那不是我的电话。我必须和 – user2693896

+0

@ user2693896一起工作 - 好的,如果你真的需要使用这个,Arun P Johny的解决方案很好,但是我认为你最好指导谁设计了这个概念,单选按钮是如何工作的。 –