0

I've been working on a form element replacement script – replacing normal form elements with divs that can be styled – but I've run into an issue with radio buttons. I cannot figure out how to remove a checked replacement button's "selected" class when another button is selected.

I've included my code in this fiddle: http://jsfiddle.net/zumwalt/eEvPE/3/

Any help is greatly appreciated!

Zumwalt
  • 151
  • 1
  • 4
  • 13

3 Answers3

1

You just need to add the following line in your click handler to clear the selected class from all radios, before adding it to the one which was clicked:

$(".radio").removeClass("selected");

Updated fiddle here

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • And what if there's multiple radio buttons with different names in the same page. This would remove the class for all. – aziz punjani Dec 06 '11 at 22:24
  • So simple. I've been looking at this too long. Thanks for the help. @Interstellar_Coder - the nature of the application makes this a non-issue, but that's a good point. – Zumwalt Dec 06 '11 at 22:49
0

Remove classes using: http://api.jquery.com/removeClass/ or read this already asked question.

Community
  • 1
  • 1
Matt Cofer
  • 2,972
  • 1
  • 20
  • 18
0

Remove 'selected' class from all buttons with removeClass() and then add to the clicked one. However you should remove class only from buttons in the same radio group. There are several ways to achieve this.

You can require all buttons to be in one div element and update only buttons inside it. Or you can add class containing name attr from original radios to your buttons and update only buttons having this class. Or you can add extra attribute to your buttons with value equal to the name attribute of original radios and update only buttons having right attribute. See this fiddle: http://jsfiddle.net/n3PUe/

pronvit
  • 4,169
  • 1
  • 18
  • 27