如何在通用函數中選擇單個單選按鈕？

Question

我有幾個表單，需要根據對特定問題的回答來顯示和隱藏一些問題。我不想編寫大量的重複代碼，而是試圖編寫一個通用函數。

它適用於選擇選項，但不適用於單選按鈕。我添加了一個註釋的console.log語句，其中發生了問題。我不知道如何選擇用戶單擊的單選按鈕，而不是所有單選按鈕。在自定義代碼中，我會使用$（this）並且可以工作，但不知道如何推廣。

在這個例子中，如果＃q1是'是'，那麼應該顯示'q2'和'q3'，否則應該隱藏。如果#a設置爲'1'，那麼#b和#c應該顯示，否則將被隱藏。

https://jsfiddle.net/mskppbjL/

HTML：

<div id="q1"> 
    Question 1 
    <select> 
    <option>Select</option> 
    <option value="yes">Yes</option> 
    <option value="no">No</option> 
    </select> 
</div> 
<div id="q2"> 
    Question 2 
    <input type="text" /> 
</div> 
<div id="q3"> 
    Question 3 
    <input type="radio" name="q3" value="0">0 
    <input type="radio" name="q3" value="1">1 
    <input type="radio" name="q3" value="2">2 
</div> 



<div id="a"> 
    <input type="radio" name="q3" value="0">0 
    <input type="radio" name="q3" value="1" checked>1 
    <input type="radio" name="q3" value="2">2 
</div> 
<div class="b">b</div> 
<div class="c">c</div> 

JS：

function set_related(element, value, related) { 

    var element = element, 
    value = value, 
    related = related; 

    function display() { 
    console.log($(element).val()); // always returns 0 because not $(this) element but all 
    if ($(element).val() == value ? $(related).show() : $(related).hide()); 
    } 

    $(document).ready(function() { 
    display(); 
    $(element).change(display); 
    }) 

} 

$(document).ready(function() { 
    set_related($("#q1 select"), "yes", $("#q2, #q3")); 
    set_related($("#a input[type='radio']"), "1", $(".b, .c")); 
}) 

Answer 1

編輯：

你的函數調用單選按鈕應該是

$("#a input[type='radio']").click(function() { 
    set_related($(this), "1", $(".b, .c")); 
    }); 

DEMO

Answer 2

可以使用type屬性來選擇單選按鈕，以及checked僞類選定元件，例如;

$('#q3 input[type="radio"]:checked'); 

在你想要的東西類似的功能;

$('#q1 input[type="radio"]').on('change', function(){ 
    if ($(this).val() == 'yes') 
    { 
     $('#q2').show(); 
     $('#q3').show(); 
    } 
    else 
    { 
     $('#q2').hide(); 
     $('#q3').hide(); 
    } 
});