Question

So I’m starting to get into jquery more and more lately. I’ve created custom radio buttons and doing this to show that a radio button is selected:

 $('.radio_1').mousedown(function() {
  $(this).toggleClass('selected');
  $('.radio_2').removeClass('selected');
  $('.radio_3').removeClass('selected');
 });
 $('.radio_2').mousedown(function() {
  $(this).toggleClass('selected');
  $('.radio_1').removeClass('selected');
  $('.radio_3').removeClass('selected');
 });
 $('.radio_3').mousedown(function() {
  $(this).toggleClass('selected');
  $('.radio_2').removeClass('selected');
  $('.radio_1').removeClass('selected');
 });

Using CSS, I’ve hidden the actual radio button itself. Is there a way of slimming this down a bit to lose the repetitiveness?

Thanks!

Answer 1

Give all your radio’s the same class (.radio in my example).

What the code below is saying is when one of the .radio’s is mouse’d down, remove the class .selected from all of the .radio’s and add the class .selected to the radio that was clicked.

$('.radio').mousedown(function() {
  $('.radio').removeClass('selected');
  $(this).addClass('selected');
});