單選按鈕添加類元素

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>