显示当单选按钮使用JQuery

Question

检查隐藏的内容我有两个的复选框

ABC 
XYZ 

ABC时检查我展示ABC的内容股利和XYZ时检查我展示XYZ内容DIV

如果默认ABC单选按钮被选中 ABC内容DIV没有显示只在点击我得到它的内容

我的要求是，当只有当我在ABC和XYZ单选按钮点击想

一切的伟大工程单选按钮是检查编辑我应该得到那个特定的检查单选按钮的隐藏内容不点击

有人可以帮助我实现它

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

你需要得到检查收音机的rel值从而使用:checked选择

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

Fiddle

感谢@tushar随着一些结构的变化，你可以实现它使用纯CSS。

您可以使用:checked来选择检查单选按钮，兄弟选择+选择下一个span和input兄弟姐妹和使用他们display: block;显现。

.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删除.change();

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

Your updated Fiddle