Всего одна вещь добавить к этому (хотя я действительно думаю, что Вам уже ответили на Ваш вопрос другие). В интересах расширяемости (так как все мы знаем это, произойдет в какой-то момент) можно хотеть проверить Составной Шаблон , Это идеально для работы с "Древовидными Структурами"..
Как я сказал, я знаю, что Вы только ожидаете один подуровень, но это могло действительно быть полезно для Вас, если позже необходимо расширить ^_^
input[type="radio"]:checked+label{ font-weight: bold; }
//a label that immediately follows an input of type radio that is checked
works very nicely for the following markup:
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
... and it will work for any structure, with or without divs etc as long as the label follows the radio input.
Example:
input[type="radio"]:checked+label { font-weight: bold; }
Вы могли бы использовать немного jQuery:
$('input:radio').click(function(){
$('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});
Вам также необходимо убедиться, что выбранные вами переключатели имеют правильный класс при загрузке страницы.