样式化单选按钮(CSS/jQuery)

Question

我有这个:http://jsfiddle.net/ptWhn/

<pre>
/*HTML*/
`<label class="for_radio"><input type="radio"><span>radio-button-1</span></label>`
`<label class="for_radio"><input type="radio"><span>radio-button-2</span></label>`
/*jQuery*/
$(document).ready(function(){
$('input[type="radio"]').click(function() {
if($('input[type="radio"]').is(':checked')) { 
$(this).closest('label').addClass('active');}
else {
$(this).closest('label').removeClass('active');
}
});
      });
/*CSS*/
.active {
    background: #ffc;
}
</pre>

…当单选按钮被选中时，标签的背景颜色会发生变化，但我不知道如何删除。active类，当其中一个单选按钮未选中时，它会改变背景颜色。而且在jsfiddle中，由于某些原因，当另一个被点击时备用单选按钮不会取消选择。

第二件事我有困难弄清楚为什么是为什么我似乎需要在if语句之前的。click(function()。也就是

if($('input[type="radio"]').is(':checked')) { 
$(this).closest('label').addClass('active');}

…不能作为JS代码段单独工作。为什么?

非常感谢您的建议。谢谢。

Answer 1

首先，将预标记更改为脚本标记。

不要使用if语句来添加和删除类，为什么不直接使用toggleClass() ?

$('input[type="radio"]').click(function() {
   if($('input[type="radio"]').is(':checked')) { 
      $(this).closest('label').toggleClass('active');
   }
});

Answer 2

你不需要if语句，试试这个:

$(document).ready(function(){
   $('input[type="radio"]').click(function() {
      $('input:not(:checked)').parent().removeClass("active");
      $('input:checked').parent().addClass("active");
   });
});

还有，你说"当另一个单选按钮被点击时，另一个单选按钮不会取消选择。"

在输入中添加name属性，例如:Name="Group1"

Answer 3

好的，这里有一些东西

首先，组中的单选按钮需要具有相同的名称。例如:

<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-1</span></label>
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-2</span></label>

这将处理替代按钮不取消选择的问题。

要解决添加和删除类的问题，使用jQuery toggleClass:

$('input[type="radio"]').click(function() {
    $(this).closest('label').toggleClass('active');
});

不需要if语句。

Answer 4

我试着回答这个问题，因为每个人都关注你使用<pre>而不是<script>的事实。

$('input[type="radio"]').on('change',function() {
    $('label.active').removeClass('active'); //removes class on old active label
    $(this).parent().addClass('active'); // adds class to new active label
}

我这样做而不是使用。toggleclass()的原因是，如果你有两个以上的单选按钮，它实际上会工作。