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を使用してこれら2つのクラス（「オフ」と「オン」）を切り替えようとしています。

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