0

我有这个：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 片段工作。为什么？

将不胜感激任何见解。谢谢。

4

4 回答 4

2

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

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

$('input[type="radio"]').click(function() {
   if($('input[type="radio"]').is(':checked')) { 
      $(this).closest('label').toggleClass('active');
   }
});
于 2013-03-06T22:43:27.863 回答
1

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

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

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

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

于 2013-03-06T22:50:51.237 回答
1

好的，这里有几件事。

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

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

于 2013-03-06T22:51:27.913 回答
0

我将尝试回答这个问题，因为每个人都专注于您使用<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() 的原因是因为如果您有两个以上的单选按钮，这实际上会起作用。

于 2013-03-06T22:45:42.257 回答