单选按钮添加类元素

Question

我需要创建2个单选按钮。

当用户在页面上时，单选按钮未被选中。
内部单选按钮内容是CTA按钮，它将变灰
只有当用户选择收音机时，CTA按钮才会改变颜色。

我已经创建了我想要使用的按钮的样式，而是在选择单选按钮时来回切换。

下面是一个例子。
有人可以指导我如何添加和删除类，以便在jQuery中切换颜色吗？

https://codepen.io/Ambuja/pen/BZNzRx

$('input').prop('checked', false); 
 
$('span a').css('background-color','grey') 
 
$('input').on('change', function() { 
 
    if ($(this).is(':checked')) { 
 
     var dt = $(this).data('title') 
 
     $('span a').css('background-color','grey') 
 
     $('#' + dt).css('background-color','orange') 
 
     console.log(dt) 
 
    } 
 
})

label { 
 
    font-family: $verdana; 
 
    font-size:12px; 
 
    margin-left:13px; 
 
    font-weight: normal; 
 
} 
 
    
 
    
 
    
 
} 
 
input[type="radio"]:checked + label:before { 
 
    
 
    text-align: center; 
 
} 
 
.high { 
 
    color:yellow; 
 
} 
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="medium-6 large-6 columns"> 
 
    <input type="radio" name="form-radio" id="workshops" value="high" data-title="workshopcl" checked=""> 
 
    <label id="workshoping" for="workshops">Workshops</label> 
 

 
    <p>This is random text</p> 
 

 
    <span style=" 
 
    background-color: grey; 
 
"><a href="#" id="workshopcl" style="background-color: orange;">WorkShops</a></span> 
 
    </div> 
 

 
    <div class="medium-6 large-6 columns"> 
 
    <input type="radio" name="form-radio" id="courses" data-title="cou" value="option2"> 
 
    <label for="courses">Courses</label> 
 
    <br> 
 
    <p>This is a random text</p> 
 

 

 

 
    <span><a href="#" id="cou" class="" style="background-color: transparent;">Courses</a></span> 
 

 
    </div> 
 

 
</div>

Answer 1

$('input').prop('checked', false); 
 
$('span a').addClass('greyColor'); 
 
$('input').on('change', function (el) { 
 
    debugger; 
 
    if ($(this).is(':checked')) { 
 
     var dt = $(this).data('title'); 
 
     //if you have only 2 radio btn, you could use the below commented code. 
 

 
     //if(dt=="cou"){ 
 
      // $('#cou').attr('href','https://www.google.com'); 
 
      // $('#cou').addClass('orangeColor'); 
 
      // $('#workshopcl').removeClass('orangeColor'); 
 
      // $('#workshopcl').attr('href','#'); 
 
     //} 
 
     //else{ 
 
      // $('#workshopcl').addClass('orangeColor'); 
 
      // $('#workshopcl').attr('href','https://www.gmail.com'); 
 
      // $('#cou').removeClass('orangeColor'); 
 
      // $('#cou').attr('href','#'); 
 
//  } 
 

 

 
     $('span a').removeClass('orangeColor'); 
 
     $('#' + dt).addClass('orangeColor'); 
 
     $('span a').attr('href','#'); 
 
     if(dt=="cou"){ 
 
      $('#' + dt).attr('href','https://www.google.com'); 
 
     } 
 
     else{ // if you have more than 2 radio buttons then use if-else-if statement. 
 
      $('#' + dt).attr('href','https://www.gmail.com'); 
 
     } 
 
    } 
 
})

label { 
 
    font-family: $verdana; 
 
    font-size:12px; 
 
    margin-left:13px; 
 
    font-weight: normal; 
 
} 
 
    
 
input[type="radio"]:checked + label:before { 
 
    
 
    text-align: center; 
 
} 
 
.high { 
 
    color:yellow; 
 
} 
 

 
.greyColor{ 
 
    background-color:grey; 
 
} 
 

 
.orangeColor{ 
 
    background-color:orange; 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="medium-6 large-6 columns"> 
 
    <input type="radio" name="form-radio" id="workshops" value="high" data-title="workshopcl" checked=""> 
 
<label id="workshoping" for="workshops">Workshops</label> 
 
    
 
         <p>This is random text</p> 
 

 
     <span><a href="#" id="workshopcl">WorkShops</a></span> 
 
         </div> 
 
    
 
    <div class="medium-6 large-6 columns"> 
 
<input type="radio" name="form-radio" id="courses" data-title="cou" value="option2"> 
 
<label for="courses">Courses</label> 
 
<br> 
 
<p>This is a random text</p> 
 

 
    
 
       
 
         <span><a href="#" id="cou">Courses</a></span> 
 
         
 
         </div> 
 
         
 
    </div>

Answer 2

只需使用jQuery方法removeClass()和addClass()。

通常，当您想要从一组元素中移除活动类并将活动类应用于新活动类时，首先从组中的所有元素中移除活动类，然后将该类添加到所选元素。尽管这次我们会做一些改变，因为我们可以加入其他标记复杂性和data-属性。

有了这个解决方案，我利用了这个事实，即您的data-title属性包含关联锚的ID值。在input的每次更改中，我们从存储的锚点$active中删除活动类，然后使用值data-title选择关联的锚点并应用活动类。

**注意：对标记（HTML）做了一些改进。

var $active; 
 

 
$('input').on('change', function (e) { 
 
    
 
    var $this = $(this), 
 
     ctaID = $this.data('title'); 
 
     
 
    if ($active) $active.removeClass('active'); 
 
    
 
    $active = $('#' + ctaID).addClass('active'); 
 

 
});

label { 
 
    font-family: Verdana, sans-serif; 
 
    font-size: 12px; 
 
    margin-left: 13px; 
 
    font-weight: normal; 
 
} 
 

 
.cta { 
 
    background-color: gray; 
 
} 
 
.active { 
 
    background-color: orange; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 

 
    <div class="medium-6 large-6 columns"> 
 
    
 
    <label id="workshoping" for="workshops"> 
 
     <input id="workshops" class="radio" type="radio" name="form-radio" value="high" data-title="workshopcl"> 
 
     Workshops 
 
    </label> 
 
    <p>This is random text</p> 
 
    <a href="#" id="workshopcl" class="cta">WorkShops</a> 
 
    
 
    </div> 
 

 
    <div class="medium-6 large-6 columns"> 
 
    
 
    <label for="courses"> 
 
     <input id="courses" class="radio" type="radio" name="form-radio" data-title="cou" value="option2"> 
 
     Courses 
 
    </label> 
 
    <p>This is a random text</p> 
 
    <a href="#" id="cou" class="cta">Courses</a> 
 

 
    </div> 
 

 
</div>