Question

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

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

有两种解决方案：

使用CSS3 :checked选择器

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

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

为此目的使用全局函数。

//检查Michael的解决方案。

Answer 3

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

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

使用javascript onClick来设置当前所选单选按钮的样式

3 个答案: