Использование 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

Вы должны сначала удалить этот класс из всех переключателей, а затем добавить его обратно в щелкнул один. Определите функцию, которая делает это, получив идентификатор в качестве параметра и связав его с 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/