jquery - 带有 jquery 的单选按钮

Question

我有一堆div：

<div class='option'>
    <span>here is a label for one pair of radio buttons</span>
    <a href='#' rel='radio' class='on'>On</a>
    <a href='#' rel='radio' class='off'>Off</a>
</div>

我正在尝试使用 jQuery 在这两个类（'off' 和 'on'）之间切换。

<script>; 
$(document).ready(function(){ 
   $("a[rel='radio']").click(function(){
      if($(this).attr('class')=='on'){
        //make $(this) have class 'off'
        //make the other a in *this* div have class 'on'

      } else {
        //make $(this) have class 'on'
        //make the other a in the div have class 'off'
      }

  });
});
</script>

如何将注释的伪代码转换为真实的 jQuery？

Answer 1

您描述的行为与标准单选按钮不同，但可以如下所示：http: //jsfiddle.net/BJGKH/。

$("a[rel='radio']").click(function(){
   // this and sibling - toggle both classes from each
   $(this).siblings("a[rel='radio']").addBack().toggleClass("on off");
});​

Answer 2

尝试这个;

$("a[rel='radio']").click(function(){
   $(this).siblings('a').andSelf().toggleClass('on off')
});

Answer 3

像这样的东西：

$(document).ready(function(){ 
   $("a[rel='radio']").click(function(){
      if($(this).attr('class')=='on'){
        $(this).removeClass('on').addClass('off');
        $(this).siblings().removeClass('off').addClass('on');
      } else {
        $(this).removeClass('off').addClass('on');
        $(this).siblings().removeClass('on').addClass('off');
      }
  });
});