一段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");  };});