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

Sjay 发表于 Dev

杰伊

我有两个复选框

ABC
XYZ

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

只有当我单击ABC和XYZ单选按钮时，所有内容才能正常运行，前提是默认情况下，如果选中了ABC单选按钮，则abc content 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();
});

萨帕尔

您需要获取rel选中的收音机的值，因此可以使用:checked选择器

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

小提琴

感谢@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>