1

望ましい状況は、<div class="resp">選択されたときに各ラジオbtnを下に表示することであり、それぞれ<div class="resp">に異なるコンテンツが含まれています。次の無線btnを選択すると、前の無線btn<div class="resp">が非表示になり、選択した無線btnはそれぞれ<div class="resp">以下のようになります。質問ごとに、同時に1つの応答が表示されるはずです。Q2ラジオボタンをクリックすると、Q1応答の1つが表示されます。

現在の状況では、選択したときにすべての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 -->
4

3 に答える 3

3

これを試して ：

$(".resp").hide();
$(".radioBtn").change(function(){
    $(".resp").removeClass('expand').hide(); // <--- add this
    if(this.checked) {
        $(this).parent().next().show().addClass('expand');
    };
});
于 2012-12-04T12:06:28.973 に答える
0

単純な

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

このフィドルを確認してください：http：//jsfiddle.net/rdcLg/

于 2012-12-04T12:13:38.993 に答える
0

それでもこれが当てはまる場合は、このコードの短いバージョンがあります。私は同じ質問をしました。こちらがリンクです。2つの実例と2つの答えだけがあります。

Divの複数のラジオボタンの表示/非表示JQuery

于 2013-04-22T01:33:05.483 に答える