Javascript 使用数据切换显示/隐藏基于所选的DIV="；按钮“；输入单选按钮引导3

我们已经用java脚本和Jquery检查了几乎所有可能的解决方案。但却无法找到解决办法。几乎所有的解决方案都使用“数据切换=“按钮”。但我需要使用数据切换=“按钮”

这是我的密码：

    <div class="btn-group btn-toggle"  data-toggle="buttons">
    <label class="btn btn-default">
      <input type="radio" name="subscription-period" value="3mths" > 3 months
    </label>
    <label class="btn btn-default">
      <input type="radio" name="subscription-period" value="6mths" > 6 months
    </label>
        <label class="btn btn-default">
      <input type="radio" name="subscription-period" value="12mths" > 12 months
    </label>
  </div>
</nav>

<div class="prices" data-period="3mths">A 1</div>
<div class="prices" data-period="6mths">B 1</div>
<div class="prices" data-period="12mths">C 1</div>

<div class="prices" data-period="3mths">A 2</div>
<div class="prices" data-period="6mths">B 2</div>
<div class="prices" data-period="12mths">C 2</div>

<div class="prices" data-period="3mths">A 2</div>
<div class="prices" data-period="6mths">B 2</div>
<div class="prices" data-period="12mths">C 3</div>

这里引用

---

您可以查看live。添加了带有data toggle=“buttons”和不带data toggle=“buttons”的选项，更新jquery，如下所示

$(document).ready(function() {
$(".prices").hide();
$(".btn-default").click(function(){
  var test = $(this).find("input[name$='subscription-period']").val();
    $(".prices").hide();
    $(".prices[data-period='" + test + "']").show();
});

});

---

您到底想要什么？

$(document).ready(function() {
$(".prices").hide();
$(".btn-default").click(function(){
  var test = $(this).find("input[name$='subscription-period']").val();
    $(".prices").hide();
    $(".prices[data-period='" + test + "']").show();
});

});