Как использовать jQuery для отображения содержимого на основе проверки флажка

Question

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

HTML

<fieldset id="question"> 
    <legend>This is my question</legend> 
    <label for="answerYes">Yes</label> 
    <input name="answer" id="answerYes" type="radio" value="1" /> 
    <label for="answerNo">No</label> 
    <input name="answer" id="answerNo" type="radio" value="0" /> 
</fieldset> 

JQuery

$("#subQuestion").hide(); 
$("#answerYes").click(function() { 
    $("#subQuestion").show(); 
}); 
$("#answerNo").click(function() { 
    $("#subQuestion").hide(); 
}); 

Эта логика ломается, хотя, когда кто-то возвращается к форме, чтобы изменить его. В этом случае поля предварительно заполняются, поэтому функция клика не существует. Как я могу использовать jQuery для отображения #subQuestion, если #answerYes проверяется при загрузке страницы.

Answer 1

Попробуйте добавить $ (документ) .ready() на вашу страницу ...

$(document).ready(function(){ 
    // do your checks of the radio buttons here and show/hide what you want to 
    $("#subQuestion").hide(); 
    if ($("#answerYes:checked").length > 0){ $("#subQuestion").show(); } 

    // add functionality for the onclicks here 
    $("#answerYes").click(function() { 
    $("#subQuestion").show(); 
    }); 

    $("#answerNo").click(function() { 
    $("#subQuestion").hide(); 
    }); 
}); 

Этот обработчик будет выпалить когда страница полностью загружена (и динамически предварительно заполнены значениями)

Answer 2

Прикрепите логику к событию change() *. Кроме того, вы можете использовать селектор d :checked, чтобы получить выбранный в данный момент переключатель.

<input name="food" type="radio" value="apples" /> 
<input name="food" type="radio" value="oranges" /> 

-

$(":radio[name='food']").change(function(){ 
    var newVal = $(":radio[name='food']:checked").val(); 
    if (newVal == "apples") { 
    $("#someBox").show(); 
    } else { 
    $("#someBox").hide(); 
    } 
}); 

^{* Некоторые из них сообщили isues с change, и имеют вместо
используется click() для обработки логики}

Answer 3

Держите всю логику рендеринга в одной функции, и вызвать эту функцию, когда документ возвращается:

function renderSubquestion() { 
    $('#subQuestion').toggle($("#answerYes").attr('checked')); 
} 

$(function(){ 
    $('#answerNo').click(renderSubquestion); 
    $('#answerYes').click(renderSubquestion); 
    renderSubquestion(); 
} 

Answer 4

Если ответ на стороне сервера, как с помощью PHP, то вы должны просто установить стиль #subQuestion с помощью сервера кода на стороне:

if($databaseFieldForAnswer != 1){ 
    $subDiv = '<div style=\"visibility: hidden\"></div>'; 
} 

... еще лучше, назначить класс, обрабатывает whet ее показывает div или нет.