在Jquery中，当单选按钮被选中时，如何更改css样式或切换单选按钮标签的类？

Question

我有一组单选按钮，每个单选按钮都有自己的标签：

<label>
<input type="radio" class="lstradio" name="photonum" value="4" id="photonum_1" />
4</label>

我还有这些标签的css，可以与鼠标悬停一起使用：

label {
font-family: sans-serif;
font-size: 20px;

}
label:hover {
background-color: #FF6; 
}

我的问题是:当我的单选按钮输入被选中时，如何使用jQuery切换标签的css样式或类？

以下是场景：

在每个字段集中有许多单选按钮，我的想法是只为在每个字段集中选中的单选按钮的标签更改css样式...

也许我需要摆弄一下blur()函数？

下面是示例：http://jsfiddle.net/ykK2s/2/

Answer 1

您可以在click()上的label中执行此操作。

$('label').click(function(){
    $('label').removeClass('checked');
    $(this).addClass('checked');
});

检查此http://jsfiddle.net/Eunpt/

编辑： <span>s让事情变得有点复杂，但这是可行的：

$('label').click(function(){
    $(this).parents('fieldset').find('label').removeClass('radiochecked');
    $(this).addClass('radiochecked');
});

Look http://jsfiddle.net/ykK2s/4/

Answer 2

<label for="photonum">
    <input type="radio" class="lstradio" name="photonum"
           value="4" id="photonum_1" />
4</label>


<script>
    $('input.lstradio').change(function(){
        var that = $(this);

        if(that.attr('checked')) {
            var selector = 'label[for="' + that.attr('name') + '"]';

            $(selector).addClass('someclass');
        }
    });
</script>

http://jsfiddle.net/DN4Nu/1/

Answer 3

如果所有的无线电都像你的例子中那样用标签包装，那么这应该是可行的：

$('input.lstradio').click(function() {
    jQuery(this).parent().class('myclass');
});