使用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/