如何在通用函数中选择单个单选按钮？

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(); 
    } 
});