javascript - Showhide DIV based on selected radio button input - Stack Overflow

admin管理员组

文章数量:1318582

I'm trying to toggle multiple DIVs that have the same data attribute value based on the value of the select radio button.

But I'm not sure what's wrong with my code below.

By default, the first radio button is always selected on load, how do I trigger it to show the 3 DIVs of the matching value?

Mark-up:

<nav id="gift-subs-options">
    <ul>
        <li class="selected">
            <label>
                <input type="radio" name="subscription-period" value="3mths" checked />
                <span class="period">3 months</span>                        
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="subscription-period" value="6mths" />
                <span class="period">6 months</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="subscription-period" value="12mths" />
                <span class="period">12 months</span>
            </label>
        </li>
    </ul>
</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[data-period]='" + test + "'").show();
    });
});

Fiddle if you wanted to test: /

I'm trying to toggle multiple DIVs that have the same data attribute value based on the value of the select radio button.

But I'm not sure what's wrong with my code below.

By default, the first radio button is always selected on load, how do I trigger it to show the 3 DIVs of the matching value?

Mark-up:

<nav id="gift-subs-options">
    <ul>
        <li class="selected">
            <label>
                <input type="radio" name="subscription-period" value="3mths" checked />
                <span class="period">3 months</span>                        
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="subscription-period" value="6mths" />
                <span class="period">6 months</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="subscription-period" value="12mths" />
                <span class="period">12 months</span>
            </label>
        </li>
    </ul>
</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[data-period]='" + test + "'").show();
    });
});

Fiddle if you wanted to test: http://jsfiddle/calebo/cRKwY/

• javascript
• jquery
• html
• radio-button

Share Improve this question Follow asked Oct 17, 2013 at 6:00 calebocalebo 3,4421010 gold badges4848 silver badges6969 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

What you have given is syntactically wrong. You need to give this way:

$(".prices[data-period='" + test + "']").show();

Also hide other divs before refreshing.

$(".prices").hide();

Full Code:

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

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

Fiddle: http://jsfiddle/praveenscience/Lgk7B/

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

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

Read attribute equals selector

DEMO

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

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

Use following :

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

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

Here is the working demo : http://jsfiddle/cRKwY/2/

本文标签： javascriptShowhide DIV based on selected radio button inputStack Overflow