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类，当其中一个单选按钮改变背景颜色时是UNchecked。而且在jsfiddle中，由于某种原因，当单击另一个时，备用单选按钮不会取消选择。

第二件事我无法弄清楚为什么我在if语句之前需要.click（function（））。也就是说，

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

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

非常感谢任何见解。感谢。

Answer 1

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

为什么不使用toggleClass()而不是使用if语句添加和删除类？

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

另外，你说＆＃34;当点击另一个时，备用单选按钮不会取消选择。＆＃34;

为您的输入添加名称属性，即：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（）的原因是因为如果你有两个以上的单选按钮，这实际上会有效。

样式单选按钮（CSS / jQuery）

4 个答案: