javascript - jquery 在单选按钮上的选择上应用 css 类

Question

我有 3 个单选按钮。我需要做的是，当选择一个单选按钮时，我需要在它之后的文本上应用我的 css 类名“line”，例如

  <span> <input type="radio" name="group1" value="Milk">  Milk </span> 

我需要申请牛奶类(class)当用户选择其他单选按钮时，相同的类适用于其他单选按钮文本，但从前一个单选按钮中删除类。这就是我尝试过的

<style type="text/css">
    .line{
        text-decoration: line-through;
         }
</style>

<script type="text/javascript">
$(document).ready(function(){
   $("input[type='radio']").change(function(){
      if($(this).is(':checked'))
          //i wana do this
           $(this).addClass('line');
         //if another is selected so do this
           $(this).removeClass('line');
      });
   });

 <div>
  <span> <input type="radio" name="group1" value="Milk">  Milk </span> </br>
  <span> <input type="radio" name="group1" value="Butter"> Butter </span> </br>
  <span> <input type="radio" name="group1" value="Cheese"> Cheese </span> </br>
  <hr>
</div>

Answer 1

由于需要将类添加到span，可以使用parent从单选按钮访问 span。要从其他 span 元素中删除类，只需在将类添加到刚刚选择的 span 之前从所有具有相关类的元素中删除它:

$("input[type='radio']").change(function() {
   if(this.checked) {
      $('span.line').removeClass('line');
      $(this).parent().addClass('line');
   }
});

这是一个 working example .

请注意使用 this.checked 而不是您拥有的 jQuery 版本。尽可能使用 native DOM 属性要快得多。