显示一个div，并通过选中的单选按钮隐藏另一个

Question

我想了解如何使用jquery显示/隐藏依赖于值的元素。我不知道如果.show/.hide是正确的选择，所以任何帮助将不胜感激...

这是我的例子jsfiddle其中我有2个单选按钮和2个div。

我想让Jquery通过checked单选按钮的依赖来显示单独的div，所以它会显示只有被选中。

HTML：

<input type="radio" name="one" value="01" checked> Male<br> 
<input type="radio" name="two" value="02"> Female<br> 

<div class="showhide"> 
show me when 01 is checked. 
</div> 

<div class="showhide"> 
show me when 02 is checked. 
</div> 

JQuery的（想了解在这里做什么）：

$("div.showhide").hide(); 
$("div.showhide").show(); 

// or maybe with: 

$("div.showthis").toggle(this.checked); 

Answer 1

使用data-*属性派上用场的这种做法。请注意，无线电name属性必须与任何给定时间只能检查一个复选框的属性相同。而且，至少在所提供的示例中，代码中没有p标记，那么为什么还要在选择器前加上前缀呢？

以下示例利用data-section属性，该属性具有用于在复选框被选中时必须显示的元素的选择器。值得一提的是，这是代码是动态的，并且不需要在使用div添加更多输入时更改代码。

$(function() { 
 
    
 
    // listen for changes 
 
    $('input[type="radio"]').on('change', function(){ 
 
     
 
     // get checked one    
 
     var $target = $('input[type="radio"]:checked'); 
 
     // hide all divs with .showhide class 
 
     $(".showhide").hide(); 
 
     // show div that corresponds to selected radio. 
 
     $($target.attr('data-section')).show(); 
 

 
    // trigger the change on page load 
 
    }).trigger('change'); 
 

 
});

.showhide { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="radio" name="one" data-section="#div-1" value="01" checked>Male<br> 
 
<input type="radio" name="one" data-section="#div-2" value="02">Female<br> 
 

 
<div id="div-1" class="showhide"> 
 
show me when 01 is checked. 
 
</div> 
 
<div id="div-2" class="showhide"> 
 
show me when 02 is checked. 
 
</div>