在jquery中，如何检查单选按钮时更改css样式或切换单选按钮标签的类？

问题描述：

我有一大堆的单选按钮的组中，并且每个单选按钮都有自己的标签：在jquery中，如何检查单选按钮时更改css样式或切换单选按钮标签的类？

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

答

你可以做它label上click()。

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

入住这http://jsfiddle.net/Eunpt/

编辑：的<span>小号复杂一点点的事情，但这种将工作：

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

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

好吧，我试过这种方式，但现在我的主要问题是，我在一个字段集中的收音机组中有一个动态数量的单选按钮。即每个字段集都包含一个无线电组，因此对于每个单选按钮组，只有一个单选按钮被选中...所以基本上对于每个无线电组，CSS类改变应该（1）addClass添加单选按钮的“checked”类（2）removeClass所有单选按钮的'checked'类在该组和FIELDSET ...任何建议？ – jaguarhaus 2012-02-18 05:09:45

你可以在jsFiddle上发布示例吗？ – elclanrs 2012-02-18 05:17:16

注意：jsFiddle代码是从一个php脚本生成的......你可以看到，对于每个字段集，如果单击另一个单选按钮，它将保留css类......我试图只获取每个选中的单选按钮fieldset将其父级标签样式更改... http://jsfiddle.net/ykK2s/2/ – jaguarhaus 2012-02-18 06:38:25

答

<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（）函数？这里是样本： http://jsfiddle.net/ykK2s/2/ – jaguarhaus 2012-02-18 06:53:49

答

试试这个：

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

您没有事件处理程序。 – 2012-02-18 03:54:41

问题没有要求事件处理程序 – 2012-02-18 03:56:43

'当我的单选按钮输入被选中时，如何切换标签的CSS样式或类？'您的代码只在页面加载时进行检查，如果用户以后检查按钮什么都不会发生。 – 2012-02-18 03:57:57

答

如果所有的电台都包裹着一个标签在你的榜样那么这应该工作：

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

下面是这种情况：在每个字段集有一些单选按钮，想法是改变CSS样式只为标签在这些字段集中检查的单选按钮... 也许我需要摆弄blur（）函数？以下是样本： http://jsfiddle.net/ykK2s/2/ – jaguarhaus 2012-02-18 06:54:16

在jquery中，如何检查单选按钮时更改css样式或切换单选按钮标签的类？

相关推荐