javascript - 使用 javascript onClick 设置当前选定单选按钮的样式

Question

我正在尝试将“当前”类添加到当前选择的任何单选选项中。我可以用

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

但是，这确实会添加类，但是当您选择另一个单选按钮时它会粘住（因为它在每个按钮上）。关于如何在所有单选按钮上实现它的任何想法？

这是我正在使用的代码：

<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

您需要首先从所有单选按钮中删除该类，然后将其添加回单击的单选按钮。定义一个通过接收 id 作为参数来执行此操作的函数，并将其绑定到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;
}

然后绑定每个单选按钮的onclick使用：

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

Answer 2

有2个解决方案：

使用 CSS3:checked选择器

 form input:checked {
   /* your style rules here. */
   /* No more scripting needed. */
 }

http://www.quirksmode.org/css/enabled.html

为此目的使用全局函数。

// 检查迈克尔的解决方案。

Answer 3

使用 CSS 伪选择器并忘记 JavaScript。有一个用于element:checked.

http://css-tricks.com/pseudo-class-selectors/