使用JQuery和3個單選按鈕來顯示/展開不同的HTML

Question

我需要幫助來擴展一個在this page上的jquery腳本來創建一組三個單選按鈕，每個按鈕在選中時顯示/展開不同的html。

上述鏈接頁面中的教程和提供的腳本是爲一組兩個單選按鈕編寫的。下面是本教程的一組的兩個單選按鈕，「是」和「否」，這沒有被選中時的HTML例子揭示了id='parent2'的HTML：

//Example 2: Display Fields Based On Selected Radio Button With jQuery Cookie 
<fieldset></p> 
<ol class="formset"> 
     <li><label for="fname2">First Name: </label> 
    <input type="text" id="fname2" value="" name="fname2"/></li> 
     <li><label for="lname2">Last Name: </label><br /> 
    <input type="text" id="lname2" value="" name="lname2"/></li> 
     <li><label for="email2">Email Address: </label><br /> 
    <input type="text" id="email2" value="" name="email2" /></li> 
     <li><label for="age2">Are you above 21 yrs old?</label><br /> 
    <input type="radio" name="age2" value="Yes" class="aboveage2" /> Yes 
    <input type="radio" name="age2" value="No" class="aboveage2" /> No</li> 
</ol> 
<ol id="parent2" class="formset"> 
     <li><strong>Parent/Guardian Information:</strong></li> 
     <li><label for="pname2">Parent Name: </label> 
    <input type="text" id="pname2" value="" name="pname2"/></li> 
     <li><label for="contact2">Contact No.: </label><br /> 
    <input type="text" id="contact2" value="" name="contact2"/></li> 
</ol> 
<input type="submit" name="submit" value="Submit" class="submitbtn" /> 
</fieldset> 

而這裏的隱藏和顯示/擴展了jQuery在'parent2'中的HTML，並在餅乾中寫入parent2的展開或摺疊狀態（用於表單重新加載時）。

$(document).ready(function(){ 
    $("#parent2").css("display","none"); 
     $(".aboveage2").click(function(){ 
     if ($('input[name=age2]:checked').val() == "No") { 
      $("#parent2").slideDown("fast"); //Slide Down Effect 
      $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop' 
     } else { 
      $("#parent2").slideUp("fast"); //Slide Up Effect 
      $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop' 
     } 
    }); 
     var showTop = $.cookie('showTop'); 
     if (showTop == 'expanded') { 
     $("#parent2").show("fast"); 
     $('input[name=age2]:checked'); 
     } else { 
     $("#parent2").hide("fast"); 
     $('input[name=age2]:checked'); 
     } 
}); 

我的問題是試圖用一組三個單選按鈕，例如有選擇「是」，「也許」和「否」，點擊後每個透出不同的HTML（和隱藏以前選擇的選項的HTML，如果有的話）。

我的解決方案是嘗試使用if，else if，else語句來包裝現有的if，else語句，類似於上述教程中的代碼。但是這不是解決這個問題的正確方法，或者我錯誤地使用了語句語法。

有人可以請建議正確的方法嗎？

Answer 1

這是否你想要做什麼：http://jsfiddle.net/8p7J2/2/

Answer 2

有很多方法可以做到這...這是很難說的任何一種方式是「正確的」 ......但我可以給你一個小的，簡潔的可能性：

首先，檢查出例如運行我放在一起的jsfiddle.net：http://jsfiddle.net/hPPqc/

標記：

<div><input type='radio' name='opt' value='1' /> Option 1</div> 
<div><input type='radio' name='opt' value='2' /> Option 2</div> 
<div><input type='radio' name='opt' value='3' /> Option 3</div> 
<div class='info' id='info1'>Option 1 Info</div> 
<div class='info' id='info2'>Option 2 Info</div> 
<div class='info' id='info3'>Option 3 Info</div> 

的Javascript：

var update = function() { 
    $(".info").hide(); 
    $("#info" + $(this).val()).show(); 
}; 

$("input[type='radio']").change(update); 

級

的CSS：

.info { display: none; } 

釋：

在這裏，我們有一對夫婦收音機，每一個相關的 「信息」 股利。

要與各信息框中的每個無線電聯繫起來，我決定做相應的信息框的名字電臺的價值部分（收音機值=「1」與一個信息框相關聯的名稱爲「INFO1」）

顯然，這可以通過多種方式完成......包括在div上的自定義屬性，手工等等。

我默認隱藏所有的信息框，給他們所有的類（ 「info」），它在css中指定「display：none」。

最後，我用javascript改變了所有收音機的標準。此方法重新隱藏所有「信息」框，並根據所選收音機的值特別顯示我想要的。

如果您需要任何其他信息，請讓我知道。

感謝