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

Question

我有这个 html -

<ol class="subproduct">
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test<span class="price"><span>+2</span>€&lt;/span></h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test</h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="15 min extra" />
    <p class="checkbox"></p>
    <h3>test/h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test</h3>
    <p>test words</p>
</li>
</ol>

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

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

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

这怎么可能？

Answer 1

看到这个：样本

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

试试这个演示

$(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');
    }
  });
});

Answer 3

使用 ;...删除所有<li>'s on chnage 事件的类removeClass()...然后如果检查toggleClass()了<li>

试试这个

$(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 4

试试这个 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 5

最简单的解决方案是：

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

我建议使用<input type="radio">，以便用户理解行为。