单选按钮添加类元素

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>