jquery - 使用 JQuery 选中单选按钮时显示隐藏内容

Question

我有两个复选框

ABC
XYZ

选中 ABC 时我显示 abc 内容 div，选中 XYZ 时我显示 xyz 内容 div

只有当我点击 ABC 和 XYZ 单选按钮时，一切都很好假设如果默认情况下 ABC 单选按钮被选中 abc 内容 div 仅在单击时不显示我正在获取它的内容

我的要求是当单选按钮被选中时我应该得到那个特定选中的单选按钮的隐藏内容而不是点击

谁能帮我实现它

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

您需要获取选中 radio 的rel 值，因此使用:checked选择器

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

Fiddle

感谢@tushar 通过一些结构更改，您可以使用纯 CSS 实现它。

您可以使用 :checked 选择选中的单选按钮和同级选择器 + 选择下一个 span 和 input sibling 并使用 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>