如何檢查是否選擇了單選按鈕，然后檢查下一個單選按鈕並顯示不同的內容？

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