在jQuery中如何更改CSS样式或切换radiobutton的标签的CSS样式，当检查radiobutton时？答案

【问题标题】：In Jquery how do I change a css style or switch a class for the label of a radiobutton when that radiobutton is checked?在jQuery中如何更改CSS样式或切换radiobutton的标签的CSS样式，当检查radiobutton时？
【发布时间】：2012-02-18 03:44:52
【问题描述】：

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

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

【讨论】：

这里是场景：在每个字段集中有许多单选按钮，想法是只为在每个字段集中检查的单选按钮的标签更改 css 样式...也许我需要摆弄 blur() 函数？这是示例：jsfiddle.net/ykK2s/2

【解决方案2】：

您可以在label click() 上进行操作。

$('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');
});

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

【讨论】：

好的，我尝试过这种方式，但我现在的主要问题是我在字段集中的单选组中有动态数量的单选按钮。即每个字段集包含一个单选组，因此对于每个单选按钮组，只选择一个单选按钮......所以基本上对于每个单选组，css类更改应该（1）为单选按钮添加“已检查”类已检查 (2) removeClass 该组和字段集中所有单选按钮的“已检查”类...有什么建议吗？
你能在 jsFiddle 上发布示例吗？
注意：jsFiddle 代码是从 php 脚本生成的...您可以看到，对于每个字段集，如果单击另一个单选按钮，它会保留 css 类...我正在尝试获取只有每个字段集中选中的单选按钮才能更改其父标签样式...jsfiddle.net/ykK2s/2
Por cierto，muchisimas gracias por la ayuda maestro！
完美！那很棒！感谢您帮助 jQuery 新手！ Saludos coridales！

【解决方案3】：

如果所有收音机都像您的示例中那样用标签包裹，那么这应该可以工作：

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

【讨论】：

这里是场景：在每个字段集中有许多单选按钮，想法是只为在每个字段集中检查的单选按钮的标签更改 css 样式...也许我需要摆弄 blur() 函数？这是示例：jsfiddle.net/ykK2s/2

【解决方案4】：

试试这个：

if($('#photonum_1').attr('checked') === true) { 
    $("label").toggleClass('oldClass newClass');
}

【讨论】：

问题没有要求事件处理程序
How do I switch the css style or class of the label when my radio button input is checked? 您的代码仅在页面加载时检查，如果用户随后检查按钮，则不会发生任何事情。
问题没有问什么应该触发事件
这里是场景：在每个字段集中有许多单选按钮，想法是只为在每个字段集中检查的单选按钮的标签更改 css 样式...也许我需要摆弄 blur() 函数？这是示例：jsfiddle.net/ykK2s/2