设置单选按钮样式(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>

..。它的工作原理是，当单选按钮被选中时，标签的背景颜色会发生变化，只是我不知道如何删除当其中一个单选按钮为UNchecked时更改背景颜色的.active类。同样在jsfiddle中，由于某些原因，当另一个单选按钮被单击时，它不会取消选择。

我遇到的第二件事是为什么我似乎需要在if语句之前使用.click(function() )。那是,

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

..。不能作为JS代码片段单独工作。为什么？

会很感激你的洞察力。谢谢。

Answer 1

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

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

此外，您还说“当另一个单选按钮被单击时，备用单选按钮不会取消选择。”

向您的输入添加名称属性，即：Name="Group1"

Answer 2

首先，将您的pre标签更改为script标签。

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

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

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语句。希望这能有所帮助。