如何使用單選按鈕與jQuery切換div可見性？

Question

我知道這裏有很多其他類似的問題，但我可以找到一個與多個單選按鈕相關的按鈕，用於在單個頁面上切換可見性。

我有一組20個問題在我的表單上，當用戶選擇「是」時，我想要一個textarea顯示該特定問題，以便他們可以輸入描述。

我以前遇到過一個問題，選擇「是」單選按鈕會切換頁面上所有textareas的可見性，但試圖解決這個問題，但它似乎仍然不工作。

任何幫助你可以提供將是偉大的！

的Javascript：

$('.toggle').hide(); 

$('.show').bind('change',function(){ 

    var showOrHide = ($(this).val() == 1) ? true : false; 

    showOrHide.parent().find('.toggle').toggle(showOrHide); 

}) 

HTML：

<div class="question"> 
    <label>Question 1</label> 
    <span class="options"> 
     No <input type="radio" class="show" value="0" id="question_1_no" name="question_1"> 
     Yes <input type="radio" class="show" value="1" id="question_1_yes" name="question_1"> 
     <br /> 
     <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea> 
    </span> 
</div> 

<div class="question"> 
    <label>Question 2</label> 
    <span class="options"> 
     No <input type="radio" class="show" value="0" id="question_2_no" name="question_2"> 
     Yes <input type="radio" class="show" value="1" id="question_2_yes" name="question_2"> 
     <br /> 
     <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea> 
    </span> 
</div> 

Answer 1

在以下行分配或者true或false到showOrHide變量：

var showOrHide = ($(this).val() == 1) ? true : false; 

然後，您可以嘗試調用該布爾文字上的jQuery方法，和顯然這是行不通的。改爲使用this。你也可以使用siblings而不是爬上一個水平：

$(this).siblings('.toggle').toggle(showOrHide); 

這裏有一個working example。

在一個單獨的說明，您可以簡化代碼一點，因爲0和1將強制到false和true，所以你不需要你的條件語句：

$('.show').bind('change',function() { 
    $(this).siblings('.toggle').toggle($(this).val()); 
}); 

另外，如果你」重新使用最新版本的jQuery（1.7），您應該使用on而不是bind。