Question

I am trying to add the class “current” to whatever radio option is currently selected. I can use

onClick="document.getElementById('volunteering').class += 'current';"

However, this will indeed add the class, but it sticks when you select another radio button (because it’s on each button). Any thoughts on how to implement it across all radio buttons?

Here is the code I am using:

<form> 
<ul>
    <input type="radio" name="category" id="volunteering" value="volunteering"><li class="conversation">
   <a href="#" onClick="document.getElementById('volunteering').checked = true;" >Volunteering</a>
 </li>
 <input type="radio" name="category" value="cityproblems" id="cityproblems"><li class="conversation">
   <a href="#" onClick="document.getElementById('cityproblems').checked = true;" >City Problems</a>
  </li>
 <input type="radio" name="category" value="safety" id="safety"><li class="conversation">
    <a href="#" onClick="document.getElementById('safety').checked = true;" class="">Safety</a>
 </li>
</form>

Answer 1

You need to first remove that class from all radio buttons, then add it back to the clicked one. Define a function that does this by receiving the id as a parameter, and bind that to the onclick.

function selectRadioClass(radioId) {
  // Note - there are more clever ways, like arrays and loops
  // for this, but if it's only 3, this is fine
  document.getElementById('volunteering').className = '';
  document.getElementById('cityproblems').className = '';
  document.getElementById('safety').className = '';

  // Then add it back to the node passed in by id
  document.getElementById(radioId).className = 'current';
  // And check the button
  document.getElementById(radioId).checked = true;
}

Then bind each radio button’s onclick using:

<a href="#" onClick="selectRadioClass('safety');" class="">Safety</a>