根据所选的单选按钮输入显示/隐藏DIV [英] Show/hide DIV based on selected radio button input

问题描述

我试图根据select单选按钮的值切换具有相同数据属性值的多个DIV。

但我不确定什么是

默认情况下，第一个单选按钮总是在加载时被选中，我如何触发它以显示匹配值的3个DIV？ / p>

标记：

 < nav id =gift-潜艇选项> 
< ul> 
< li class =selected> 
< label> 
< input type =radioname =subscription-periodvalue =3mthschecked /> 
< span class =period> 3个月< / span> 
< / label> 
< / li> 
< li> 
< label> 
< input type =radioname =subscription-periodvalue =6mths/> 
< span class =period> 6个月< / span> 
< / label> 
< / li> 
< li> 
< label> 
< input type =radioname =subscription-periodvalue =12mths/> 
< span class =period> 12个月< / span> 
< / label> 
< / li> 
< / ul> 
< / nav> 
 
< div class =pricesdata-period =3mths> A 1< / div> 
< div class =pricesdata-period =6mths> B 1< / div> 
< div class =pricesdata-period =12mths> C 1< / div> 
 
< div class =pricesdata-period =3mths> A 2< / div> 
< div class =pricesdata-period =6mths> B 2< / div> 
< div class =pricesdata-period =12mths> C 2< / div> 
 
< div class =pricesdata-period =3mths> A 2< / div> 
< div class =pricesdata-period =6mths> B 2< / div> 
< div class =pricesdata-period =12mths> C 3< / div> 
  

JS：

  $（document）.ready（function（）{
 $（。prices）。hide（）; 
 
 $（input [name $ ='subscription点击（函数（）{
 var test = $（this）.val（）; 
 $（。prices [data-period] =''+ test +' '）.show（）; 
}）; 
}）; 
  

小提琴如果您想测试：
http://jsfiddle.net/calebo/cRKwY/

解决方案

div>

你给出的是语法错误。您需要这样做：

  $（。prices [data-period ='+ test +'] ）。显示（）; 
  

另外隐藏其他 div $ b

  $（。prices）。hide（）; 
  

完整代码：
$ b $ （$。$ price）。hide（）;

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


小提琴： http://jsfiddle.net/praveenscience/Lgk7B/

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.net/calebo/cRKwY/

解决方案

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.net/praveenscience/Lgk7B/

这篇关于根据所选的单选按钮输入显示/隐藏DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！