クラスボタンを追加するラジオボタン

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>