Question

我有两个复选框

ABC
XYZ

当ABC被检查时我正在显示abc内容div并且当选中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();
});

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;显示。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

从JS中删除.change();

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

Your updated Fiddle

使用JQuery

2 个答案: