javascript - 通过选中单选按钮显示一个 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-* 属性在此类实践中会派上用场。请记住，radios 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>