1つのdivを表示し、他の要素を非表示のラジオボタンで非表示にします

Question

jqueryを使用して値に依存する要素を表示/非表示する方法を学習しようとしています。 .show/.hideが正しい選択であるかどうかわからないので、どんな助けも高く評価されます。

jsfiddleここには2つのラジオボタンと2つのdivがあります。

checkedラジオボタンの依存関係によってJaveryに1つの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の属性は、常に1つのチェックボックスしかチェックできないようにする必要があります。また、コードには少なくとも付属の例では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>