使用 JQuery 检查单选按钮时显示隐藏内容答案

【问题标题】：Display hidden content when radio button is checked using JQuery使用 JQuery 检查单选按钮时显示隐藏内容
【发布时间】：2015-11-06 13:38:44
【问题描述】：

我有两个复选框

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();
});

【问题讨论】：

纯 CSS 怎么样，有一些结构变化。 Demo。 **代码：** CSS input:checked + span, input:checked + input { display: block; } HTML <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" /> </label>
检查这个小提琴jsfiddle.net/mrvijayakumar/Qac6J/500。如果你觉得OK，就用这个。 :)

标签： jquery html css

【解决方案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>

【讨论】：

@Sjay 欢迎 :)。很高兴能提供帮助。

【解决方案2】：

只需从您的 JS 中删除 .change();

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

Your updated Fiddle

【讨论】：