Question

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

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

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

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

$('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>

单选按钮添加类元素

2 个答案: