如何检查是否选择了单选按钮，然后检查下一个单选按钮并显示不同的内容？答案

【问题标题】：How to check if a radio button is selected, then check for the next radio button and show different content?如何检查是否选择了单选按钮，然后检查下一个单选按钮并显示不同的内容？
【发布时间】：2012-11-22 01:15:49
【问题描述】：

理想的情况是在每个单选按钮被选中时在其下方显示<div class="resp">，并且每个<div class="resp">包含不同的内容。选择下一个无线电 btn 时，应隐藏先前的 <div class="resp">，并且所选无线电 btn 应具有如下所示的相应 <div class="resp">。对于每个问题，应该同时显示 1 个响应，当我点击 Q2 收音机 btn 时，应该会显示一个 Q1 响应。

目前的情况是我只能在选择时显示所有 div 类，但无法根据需要将它们隐藏起来。

Javascript

$(".resp").hide();

$(".radioBtn").change(function(){
    if($(this).attr("checked")) {
        $(this).parent().next().show().addClass('expand');
    };
});

HTML

<div class="span9">

            <div class="qnstitle">Q1. Lorem ipsum dolor sit amet</div>
            <label class="radio">
                <input name="qns1" class="radioBtn" type="radio" value="A">a) asdf
            </label>
            <div class="resp" data-qns="qns1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet ligula mi. Aenean eu magna quam. In ultrices nisi non tellus molestie ut mattis turpis convallis. </p>
            </div>

            <label class="radio">
                <input name="qns1" class="radioBtn" type="radio" value="B">b) bsdf
            </label>
            <div class="resp" data-qns="qns1">
                <p>Proin porta, ante eu feugiat facilisis, nulla erat porta dui, sed pellentesque orci sapien quis libero. Nam nec nibh metus, nec luctus massa.</p>
            </div>

            <label class="radio">
                <input name="qns1" class="radioBtn" type="radio" value="C">c) csdf
            </label>
            <div class="resp" data-qns="qns1">
                <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem. Fusce ut metus a dui egestas congue quis quis augue. Suspendisse sed nunc sed nulla volutpat pharetra at vel purus.</p>
            </div>

            <br>

            <div class="qnstitle">Q2. Nunc sed aliquet enim.</div>
            <label class="radio">
                <input name="qns2" class="radioBtn" type="radio" value="A">a) azzzddsaf
            </label>
            <div class="resp" data-qns="qns2">
                <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem.</p>
            </div>

            <label class="radio">
                <input name="qns2" class="radioBtn" type="radio" value="B">b) bzzzzddafdsf
            </label>
            <div class="resp" data-qns="qns2">
                <p>Aenean eu metus id dui tristique aliquam. Pellentesque non scelerisque nisi. Integer a nibh orci</p>
            </div>

            <label class="radio">
                <input name="qns2" class="radioBtn" type="radio" value="C">c) czzdfasdf
            </label>
            <div class="resp" data-qns="qns2">
                <p>Pellentesque turpis libero, consectetur nec dictum eu, accumsan a sapien. Integer eget ultrices risus. Pellentesque vel orci purus.</p>
            </div>
        </div><!-- end of span9 -->

【问题讨论】：

标签： javascript jquery html radio-button

【解决方案1】：

试试这个：

$(".resp").hide();
$(".radioBtn").change(function(){
    $(".resp").removeClass('expand').hide(); // <--- add this
    if(this.checked) {
        $(this).parent().next().show().addClass('expand');
    };
});

【讨论】：

+1 但在 jq 1.7+ 上使用 prop() 更好：$(this).prop("checked")
它适用于 1 个问题，但我的问题不止 1 个，我希望为每个问题显示 1 个回复。
@roasted - 使用this.checked 会更好（在任何版本的 jQuery 中）。当属性已经存在时，为什么还要麻烦创建一个 jQuery 对象并调用一个方法？

【解决方案2】：

就这么简单

$(".radioBtn").change(function(){
   $(".resp").hide();
   if($(this).attr("checked")) {
    $(this).parent().next().show().addClass('expand');
   };
});

检查这个小提琴：http://jsfiddle.net/rdcLg/

【讨论】：

【解决方案3】：

如果这仍然适用，则有此代码的较短版本。我问了同样的问题。这是链接。有两个工作示例，只有两个答案。

Show/Hide Divs Multiple Radio Buttons JQuery

【讨论】：