Javascript 在收音机上显示各种内容选择

我试图隐藏和显示不同的div取决于您选择的收音机。不幸的是，到目前为止，我还不能想出有效的解决办法。这是我的起始代码

也许有人可以建议如何做到这一点？我想得到每个收音机的索引，但是每个收音机都在单独的div wrap中，在这种情况下，索引总是0

谢谢你的建议。

演示：

代码：

---

另外，应该显示的每个div现在都有一个类optDivs

很抱歉没有为您提供完整的解决方案

1为什么要使用索引？每台收音机都有价值。用它来代替

2根据您选择的收音机隐藏和显示不同的div，对我来说至少像一对多关系。我建议使用publisher/subscriber执行此任务。这种模式有许多可用的实现，例如

PS试图避免基于jQuery的pubsub实现，它们在DOM上操作，速度有点慢

您可以使用它来显示或隐藏基于div的单选按钮

  var options = $('#options').find('input');

  options.click(function(){

   $("#"+$(this).parent().attr('class')).toggle();

  });

})();

---

也许这对你有帮助

$(function(){

  (function(){

  var options = $('#options').find('input');

    options.click(function(){
         if($(this).is(':checked'))
         {

          $('#' + $(this).parent().attr('class')).show();
         }
                  else
                  {
                  $('#' + $(this).parent().attr('class')).hide();
                  }

    });

  })();

  });

这将有助于：

  <script>
  $(function(){

  (function(){

  var options = $('#options').find('input');

    $(options).click(function(){

      $('#opt1, #opt2, #opt3').hide();
      $('#' + $(this).parent().attr('class')).show();

    });

  })();

  });
  </script>

---

你的版本很短很简单。非常感谢。

  <script>
  $(function(){

  (function(){

  var options = $('#options').find('input');

    $(options).click(function(){

      $('#opt1, #opt2, #opt3').hide();
      $('#' + $(this).parent().attr('class')).show();

    });

  })();

  });
  </script>