jquery applying css class on select on radio buttons

Question

i have 3 radio buttons.what i need to do is that when one radio button is selected so i need to apply my css class name "line" on the text after it like

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

i need to apply my class on Milk and when user select other radio button so the same class apply on other radio button text but remove class from the previous one.this is what i tried

<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>

James Allardice · Accepted Answer · 2012-06-14 08:36:53Z

4

Since you need to add the class to the span, you can use parent to access the span from the radio button. To remove the class from the other span elements, just remove it from all which have the class in question before adding the class to the span that was just selected:

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

Here's a working example.

Note the use of this.checked instead of the jQuery version you had. It is much faster to use the native DOM property where possible.

answered Jun 14, 2012 at 8:36

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thecodeparadox · Accepted Answer · 2012-06-14 08:42:30Z

3

$("input[type='radio']").change(function() {
    console.log(this.checked)
    if (this.checked) {
        // remove previously added line class
        $('span.line').removeClass('line');
        // you should add class to span, because text is
        // within span tag, not in input
        $(this).parent().addClass('line');
    }
});

Working sample

edited Jun 14, 2012 at 8:42

answered Jun 14, 2012 at 8:35

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Collectives™ on Stack Overflow

jquery applying css class on select on radio buttons

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related