單選按鈕 - 顯示基於與jQuery的選中按鈕的DIV

Question

我想實現以下 - 從每個問題的列表中選擇4個多選答案我需要顯示用戶是否通過顯示是否正確一旦單選按鈕被按下，它就是正確的或不正確的。

這是一個問題的例子：

<ol> 
<li id="question_one"> 
<p><input type="radio" name="question_1" value="answer_1" />Corn</p> 
<p><input type="radio" name="question_1" value="answer_2" />Cotton</p> 
<p><input type="radio" name="question_1" value="answer_3" />Rice</p> 
<p><input type="radio" name="question_1" value="answer_4" />Soybeans</p> 
</li> 
</ol> 

<div id="q1_answer_1" class="show_answer">Corn 11.0%</div> 
<div id="q1_answer_2" class="show_answer">Cotton 2.5%</div> 
<div id="q1_answer_3" class="show_answer">Rice 11.0%</div> 
<div id="q1_answer_4" class="show_answer">Soybeans 7.0%</div> 

，並將所得的jQuery：

$("#question_one input:radio:eq(answer_1)").click(function(){ 
$("#q1_answer_1").show(100); 
}); 

$("#question_one input:radio:eq(answer_2)").click(function(){ 
$("#q1_answer_2").show(100); 
}); 

$("#question_one input:radio:eq(answer_3)").click(function(){ 
$("#q1_answer_3").show(100); 
}); 

$("#question_one input:radio:eq(answer_4)").click(function(){ 
$("#q1_answer_4").show(100); 
}); 

我相信，這將無法工作，因爲eq()將只數值工作？是否有相當於eq()的輸入值？或者其他建議如何可以工作？

非常感謝

Answer 1

如果你希望它是多一點通用的，你可以做它的基礎上的價值，就像這樣：

$("#question_one :radio[name=question_1]").change(function() { 
    $("div.show_answer").hide(); 
    $("#q1_" + $(this).val()).show(100); 
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

You can give it a try here，或者如果您需要更通用的，說你有多個問題，只是在一個容器包裝每個HTML的塊以上，例如<div class="question"></div>那麼你可以做這樣的事情：

$(".question :radio[name=question_1]").change(function() { 
    $(this).closest(".question").find("div.show_answer").hide() 
      .filter("[id$='" + $(this).val() +"']").show(100); 
});​ 

You can test that version here，它將適用於多個問題，無需爲每個問題重複您的代碼。

---

註釋：

$(this).closest('li').find(':radio').attr('disabled', true); 

或者，如果你想：到第一後殺死它點擊你有幾種選擇，你可以通過添加這給處理程序（test here）禁用它們（test here）：

$(this).closest('li').find(':radio').unbind('change'); 

Answer 2

嘗試使用僞選擇：檢查，像這樣： $（「＃question_one輸入：檢查」）......