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

Question

期望的情况是在选择每个无线电btn时显示<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 -->

Answer 1

尝试这个 ：

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

Answer 2

很简单

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

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

Answer 3

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

显示/隐藏Divs多个单选按钮JQuery