Как выбрать отдельный переключатель в общей функции?

Question

У меня есть несколько форм, где мне нужно показать и скрыть некоторые вопросы, основанные на ответах на конкретные вопросы. Вместо того, чтобы писать много повторяющегося кода, я пытаюсь написать общую функцию.

Он работает для выбора опций, но не для переключателей. Я добавил комментарий console.log, в котором возникает проблема. Я не знаю, как выбрать переключатель, который пользователь нажимает, а не все переключатели. В пользовательском коде я бы использовал $ (это), и это сработает, но не обязательно, как обобщить.

В этом примере, если # 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(); 
    } 
});