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

【问题标题】：how to I uncheck boxes when checking others with jquery使用jquery检查其他人时如何取消选中框
【发布时间】：2013-03-12 10:43:57
【问题描述】：

我有这个 html -

<ol class="subproduct">
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test<span class="price"><span>+2</span>€</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");
     }
  });
});

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

这怎么可能？

【问题讨论】：

您要取消选中复选框还是从li 元素中删除类？
嗨 Aleksandr，我想在单击新的 li 复选框时从 li 元素中删除该类

标签： jquery forms checkbox

【解决方案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");
   }
 });
});

【讨论】：

【解决方案2】：

删除所有<li> 的更改事件的类...使用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 .. 
    }
  });
 });

【讨论】：

【解决方案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");
      }
  });
});

我希望我能接受你的提问

【讨论】：

【解决方案4】：

最简单的解决方案是这样的：

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

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

【讨论】：

【解决方案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');
    }
  });
});

【讨论】：