一段JQUERY写的开关代码，越写越迷糊，头好乱哦，怎么弄？

Question

http://jsfiddle.net/CkTRa/2924/

onoff开关下面有一个on一个off，off的css里有opacity: 0;

我想要得到的效果是，只有一个是开的，其他都是关的，然后点击以后也可以切换ONOFF。

单独点一个，其他都跟着变，点旁边的就跟乱套了。

我是新手，头脑转不过来，不知道怎么写了，好迷糊，写乱套了。

求助各位大神帮忙！

$(document).on('click', '.onoff', function() {

  if ($(this).parents().siblings().find('.off').css("opacity") == "0") {

        $(this).parents().siblings().find('.on').animate({marginLeft: '+=12px',opacity: 1},250)

        .next('.off').animate({marginLeft: '-=12px',opacity: 0}, 250);

  };

  

  if (!$(this).hasClass("isonoff")) {

        $(this).find('.on').animate({marginLeft: '-=12px',opacity: 0},250)

        .next('.off').animate({marginLeft: '+=12px',opacity: 1}, 250);

        $(this).addClass("isonoff");

  } else {

        $(this).find('.on').animate({marginLeft: '+=12px',opacity: 1},250)

        .next('.off').animate({marginLeft: '-=12px',opacity: 0}, 250);

        $(this).removeClass("isonoff");

  };

});