显示一个div并通过选中的单选按钮隐藏另一个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-* 属性会派上用场。Rember 无线电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>