如何在使用jquery检查其他人时取消选中框

我有这个HTML –

 
  
 
test+2€
 
test words
 
 
  
 
test
 
test words
 
 
  
 
test/h3> 
test words
 
 
  
 
test
 
test words
 
  

我需要在“检查”复选框时向li添加一个类。 目前我用这个

 $(document).ready(function() { $('.subproduct input:checkbox').change(function(){ if($(this).is(":checked")) { $(this).parent().toggleClass("checked"); } }); }); 

但我需要它，以便用户只检查一个复选框，所以如果他们检查另一个框，它将删除任何其他的类

这怎么可能？

Answer 1

见： Sample

 $(document).ready(function() { $('.subproduct input:checkbox').change(function(){ $('.subproduct input:checkbox').not(this).attr("checked",false); $(".subproduct li").removeClass("checked"); if($(this).is(":checked")) { $(this).parent().toggleClass("checked"); } }); }); 

Answer 2

删除chnage事件中所有

的类…使用removeClass() ; …然后如果检查了

toggleClass()

试试这个

 $(document).ready(function() { $('.subproduct input:checkbox').change(function(){ $(".subproduct li").removeClass("checked"); //<---here if($(this).is(":checked")) { $(this).parent().toggleClass("checked"); // and using addClass("checked") here is better .. } }); }); 

Answer 3

试试这个http://jsfiddle.net/QHuV9/4/

  $(document).ready(function() { $('.subproduct input:checkbox').change(function(){ if($(this).is(":checked")) { $(this).parent("li").addClass("checked"); } else { $(this).parent("li").removeClass("checked"); } }); }); 

我希望我带着你的问题

Answer 4

最简单的解决方案是：

 $(document).ready(function() { $('.subproduct input:checkbox').change(function(){ if($(this).is(":checked")) { $(this).parent().siblings().removeClass('checked'); $(this).parent().addClass("checked"); } }); }); 

我建议使用以便用户理解行为。

Answer 5

试试这个DEMO

 $(document).ready(function() { $('.subproduct input:checkbox').change(function(){ if($(this).is(":checked")) { $(':checkbox').prop('checked',false); $('ol li').removeClass('checked'); $(this).prop('checked',true); $(this).parent().addClass('checked'); } else { $(this).parent().removeClass('checked'); } }); });