Styling radio buttons (CSS/jQuery)

Question

<pre>
/*HTML*/
`<label class="for_radio"><input type="radio"><span>radio-button-1</span></label>`
`<label class="for_radio"><input type="radio"><span>radio-button-2</span></label>`

/*jQuery*/
$(document).ready(function(){
$('input[type="radio"]').click(function() {
if($('input[type="radio"]').is(':checked')) { 
$(this).closest('label').addClass('active');}
else {
$(this).closest('label').removeClass('active');
}

});
      });

/*CSS*/
.active {
    background: #ffc;
}
</pre>

... which works in the sense that the label's background color changes when the radio button is selected, except that I can't figure out how to remove the .active class which changes the background color when one of the radio buttons is UNchecked. And also in jsfiddle, for some reason, the alternate radio button doesn't de-select when the other one is clicked.

The second thing I'm having trouble figuring out why is why I seem to need the .click(function() before the if statement. That is,

if($('input[type="radio"]').is(':checked')) { 
$(this).closest('label').addClass('active');}

... doesn't work by itself as a JS snippet. Why?

Would appreciate any insight. Thanks.

You know <pre> != <script>, right? You're not going to run anything in <pre> tags, you're just going to print it out with code-like formatting. EDIT: this looks like actually just some weird kind of formatting jsfiddle applied to your code. Will check your js. — Colleen
– Colleen, Commented Mar 6, 2013 at 22:43

dsgriffin · Accepted Answer · 2013-03-06 22:56:48Z

2

Firstly, change your pre tags to script tags.

Instead of using an if statement to add and remove the class, why don't you just use toggleClass()?

$('input[type="radio"]').click(function() {
   if($('input[type="radio"]').is(':checked')) { 
      $(this).closest('label').toggleClass('active');
   }
});

edited Mar 6, 2013 at 22:56

answered Mar 6, 2013 at 22:43

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

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

3 Comments

LNA Over a year ago

Heh, yes, I used <pre> tags because i thought you needed them to post code in stackoverflow. Anyway, am going to spend some time looking at these answers... thanks for the quick responses, all!

MG_Bautista Over a year ago

@zenith in le last line change this )}; for });, and you can use $(':radio') and not 'input[type="radio"]'

LNA Over a year ago

Update: These answers are only getting me halfway, since I want to have the non-checked radio buttons lose the 'active' class as soon as another radio button is checked -- not when the radio button is clicked a second time.

Jack Pettinger · Accepted Answer · 2013-03-06 23:24:52Z

1

You don't need the if statement, try this:

$(document).ready(function(){
   $('input[type="radio"]').click(function() {
      $('input:not(:checked)').parent().removeClass("active");
      $('input:checked').parent().addClass("active");
   });
});

Also, you said "the alternate radio button doesn't de-select when the other one is clicked."

Add name attribute to your inputs, ie: Name="Group1"

edited Mar 6, 2013 at 23:24

answered Mar 6, 2013 at 22:50

Jack Pettinger

2,7652 gold badges25 silver badges38 bronze badges

3 Comments

LNA Over a year ago

Thanks. Makes sense, though I tried out your solution jsfiddle.net/ptWhn/6 and couldn't get it working. :/

Jack Pettinger Over a year ago

@LNA I have updated my answer, I didn't mean for you to remove the document ready and click function, just the If statement. Also in your jsfiddle, you have different name attributes for your inputs, they need to be the same.

LNA Over a year ago

W00t! Works now. Thanks... I had a couple of bugs going on.

Woodifer · Accepted Answer · 2013-03-06 23:28:35Z

1

Okay, so a few things here.

First, radio buttons in a group need to have the same name. For example:

<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-1</span></label>
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-2</span></label>

This will take care of the issue of the alternate button not deselecting.

To fix the issue of adding and removing your class use jQuery toggleClass:

$('input[type="radio"]').click(function() {
    $(this).closest('label').toggleClass('active');
});

There is no need for the if statement. Hope that helps.

edited Mar 6, 2013 at 23:28

answered Mar 6, 2013 at 22:51

Woodifer

1,0191 gold badge7 silver badges15 bronze badges

2 Comments

LNA Over a year ago

Thanks -- though this only gets me halfway, since I want to have all the other radio buttons un-highlighted as soon as another radio button is deselected, not when the radio button is clicked for the second time. I tried out your fix here: jsfiddle.net/ptWhn/2 (Btw, }); is switched up in your example).

MG_Bautista Over a year ago

you can use $(':radio') and not 'input[type="radio"]'

PlantTheIdea · Accepted Answer · 2013-03-06 23:31:15Z

0

I'll try and answer the question, since everyone is focused on the fact you're using <pre> instead of <script>.

$('input[type="radio"]').on('change',function() {
    $('label.active').removeClass('active'); //removes class on old active label
    $(this).parent().addClass('active'); // adds class to new active label
}

The reason I did it this way instead of using .toggleClass() is because this will actually work if you have more than two radio buttons.

edited Mar 6, 2013 at 23:31

answered Mar 6, 2013 at 22:45

PlantTheIdea

16.4k5 gold badges37 silver badges40 bronze badges

2 Comments

LNA Over a year ago

Your answer makes sense! Unfortunately I tried it on jsfiddle here (jsfiddle.net/ptWhn/4) and it doesn't work. :/ Anyone see where the error might be?

PlantTheIdea Over a year ago

encapsulate it in .on() event rather than having it as an if statement. I updated my answer, and ur jsFiddle, to reflect this. i also simplified it to use .parent() instead of .closest('label'), as this is all thats needed.

Collectives™ on Stack Overflow

Styling radio buttons (CSS/jQuery)

4 Answers 4

3 Comments

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related