表示隠されたコンテンツのラジオボタンがjQueryの

Question

を使用してチェックされたときに、私は2つのチェックボックスを持って

ABC 
XYZ 

ABCがチェックされているとき、私はABCのコンテンツのdivを示すことだし、XYZがチェックされているときに私は、XYZコンテンツのdiv

を示しています私が思うABCとXYZのラジオボタンをクリックしたときにのみ、デフォルトではABCラジオボタンのみ

私の要件はときである私はそれの内容を取得していますクリックでコンテンツのdivが表示されていない ABCをチェックされている場合

すべてが素晴らしい作品ラジオボタンがチェックされているED私は、誰かがそれ

http://jsfiddle.net/Qac6J/497/

HTML

<form id='group'> 
    <div> 

     <label> 
      <input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC 
     </label> 

     <span class="abc content"> 
      <label> 
       <span>I belong to ABC</span> 
       <input type="button" value="ABC"/> 
      </label> 
     </span> 

    </div> 
    <br> 
    <div> 

     <label> 
      <input type="radio" name="group1" class="trigger" data-rel="xyz"/>XYZ 
     </label> 

     <span class="xyz content"> 
      <label> 
       <span>I belong to XYZ</span> 
       <input type="button" value="XYZ"/> 
      </label> 
     </span> 

    </div> 
</form> 

CSS

達成するために私を助けることができない

をクリック上の特定のチェックをラジオボタンの隠されたコンテンツを取得する必要があります

.content 
{ 
    display: none; 
} 

jQueryの

$('.trigger').change(function() 
{ 
    $('.content').hide(); 
    $('.' + $(this).data('rel')).show(); 
}); 

Answer 1

あなたは、いくつかの構成では@tusharおかげで、あなたがそれを達成することができます変更するため:checkedセレクタ

$('.trigger').change(function() { 
    $('.content').hide(); 
    $('.' + $('.trigger:checked').data('rel')).show(); 
}).change(); //Show content on page load 

Fiddle

を使用するにチェックラジオのrel値を取得する必要があります純粋なCSSを使用します。

あなたは次のspanとinput兄弟を選択して表示するためにそれらにdisplay: block;を使用するためにチェックラジオボタンと兄弟セレクタ+を選択するために、:checkedを使用することができます。

.content { 
 
    display: none; 
 
} 
 
input:checked + span, 
 
input:checked + input { 
 
    display: block; 
 
}

<form id='group'> 
 
    <div> 
 
    <label> 
 
     <input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC 
 
     <span class="abc content"> 
 
     <span>I belong to ABC</span> 
 
     <input type="button" value="ABC" /> 
 
     </span> 
 
    </label> 
 
    </div> 
 
    <br> 
 
    <div> 
 
    <label> 
 
     <input type="radio" name="group1" class="trigger" data-rel="xyz" />XYZ 
 
     <span class="xyz content"> 
 
     <span>I belong to XYZ</span> 
 
     <input type="button" value="XYZ" /> 
 
     </span> 
 
    </label> 
 
    </div> 
 
</form>

Answer 2

ちょうどあなたのJSいくつかの構造変化と

$('.trigger').change(function() { 
    $('.content').hide(); 
    $('.' + $('.trigger:checked').data('rel')).show(); 
}); 

Your updated Fiddle