Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
733 views
in Technique[技术] by (71.8m points)

javascript - Show/hide DIV based on selected with data-toggle="buttons" input radio button bootstrap 3

Have checked almost every possible solution with java script and Jquery here. But not able to find the solution for this. Almost every solution working with your "data-toggle="buttons". But I need with data-toggle="buttons".

Here is my code:

    <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>

Js:

$(document).ready(function() {
    $(".prices").hide();

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

here taken reference here

you can check live here. Have added both with data-toggle="buttons" and with out data-toggle="buttons"

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Update your jquery like below.

$(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();
});

});

DEMO


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...