jQuery添加类到无线电框不删除 [英] jQuery add class to radio box not removed

问题描述

如果选择了jQuery，我会使用jQuery将一个类添加到广播框中。
这可以正常工作，但是在选择另一个收音机时它不会删除该类。

我错过了什么？

jQuery（。checkbox-radio）。change（function（）{
if（$（this）.is （'：checked'））
$（this）.closest（。radio-inline）。addClass（selected）;
else
$（this）.closest（ .radio-inline）。removeClass（selected）;
}）;


 < label class = radio-inline conf-option-1> 
< input type =radioclass =checkbox-radioname =configoption [1]value =1checked =checkedonclick =prodconfrecalcsummary（）> 
< i class =icon-addon>< / i> 
< span class =addon-qty>< / span> 
< span class =addon-text>文字< / span> 
< span class =addon-price>文字< / span> 
< / label> 
 
< label class =radio-inline conf-option-2> 
< input type =radioclass =checkbox-radioname =configoption [2]value =2checked =checkedonclick =prodconfrecalcsummary（）> 
< i class =icon-addon>< / i> 
< span class =addon-qty>< / span> 
< span class =addon-text>文字< / span> 
< span class =addon-price>文字< / span> 
< / label> 
 
< label class =radio-inline conf-option-3> 
< input type =radioclass =checkbox-radioname =configoption [3]value =3checked =checkedonclick =prodconfrecalcsummary（）> 
< i class =icon-addon>< / i> 
< span class =addon-qty>< / span> 
< span class =addon-text>文字< / span> 
< span class =addon-price>文字< / span> 
< / label> 
  

解决方案

删除 selected .radio-inline 中添加c $ c> class，然后根据条件添加/删除 selected ，如下所示。

 < script> 
 jQuery（。checkbox-radio）。change（function（）{
 $（。radio-inline）。removeClass（selected）; //添加这个
 if （$（this）.is（'：checked'））{
 $（this）.closest（。radio-inline）。addClass（selected）; 
} 
 else 
 $（this）.closest（。radio-inline）。removeClass（selected）; 
}）; 
< / script> b 
 
 
 $ b 
 nofollow> DEMO  
 
I use jQuery to add a class to a radio box if it is selected.
That works fine, but it does not removed the class when selecting another radio box.

What am I missing?
jQuery(".checkbox-radio").change(function() {
    if ($(this).is(':checked'))
        $(this).closest(".radio-inline").addClass("selected");
    else
        $(this).closest(".radio-inline").removeClass("selected");
});


<label class="radio-inline conf-option-1">
    <input type="radio" class="checkbox-radio" name="configoption[1]" value="1" checked="checked" onclick="prodconfrecalcsummary()">
    <i class="icon-addon"></i>
    <span class="addon-qty"></span>
    <span class="addon-text">Text</span>
    <span class="addon-price"> Text </span>
</label>

<label class="radio-inline conf-option-2">
    <input type="radio" class="checkbox-radio" name="configoption[2]" value="2" checked="checked" onclick="prodconfrecalcsummary()">
    <i class="icon-addon"></i>
    <span class="addon-qty"></span>
    <span class="addon-text">Text</span>
    <span class="addon-price"> Text </span>
</label>

<label class="radio-inline conf-option-3">
    <input type="radio" class="checkbox-radio" name="configoption[3]" value="3" checked="checked" onclick="prodconfrecalcsummary()">
    <i class="icon-addon"></i>
    <span class="addon-qty"></span>
    <span class="addon-text">Text</span>
    <span class="addon-price"> Text </span>
</label>

解决方案
Remove selected class from all .radio-inline and then add/remove selected as per condition as shown below.
<script>
jQuery(".checkbox-radio").change(function() {
  $(".radio-inline").removeClass("selected"); //add this
  if ($(this).is(':checked')){
    $(this).closest(".radio-inline").addClass("selected");
  }
  else
    $(this).closest(".radio-inline").removeClass("selected");
});
</script>
DEMO

                        
这篇关于jQuery添加类到无线电框不删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！