Jquery подтвердить требуют, если опция флажка X

Question

Я работаю над формой, которая требует проверки. Небольшая часть формы требует от пользователя выбора между двумя вариантами «Да», «Нет». Когда не выбрано no, мне нужно, чтобы они указали причину, а в противном случае, если выбрано yes, мне не нужна причина (даже поле ввода может быть скрыто тогда

Как мне создать это правило?

Допустим, часть формы выглядит следующим образом

<form  id="Form" method="get" action="">
<fieldset>
<legend>form</legend>
Yes:<input name="choice" type="radio" value="Yes"/><br>
No:<input name="choice" type="radio" value="No"/><br>
<label for="reaason">Reason</label>
<input id="reason" name="reason"  />
</fieldset>
</form>

Answer 1

Вы можете сделать это

$('input[name="choice"]').change(function(){
    if($(this).val() == 'No'){
        $('.reason').show();
    }
    else{
        $('.reason').hide();
    }
});

Пример: http://jsfiddle.net/fh2Q9/

Примечание. Я немного изменил HTML, указав «причину» inputи label класс, чтобы его было легче скрыть.

Answer 2

http://jsfiddle.net/ZYqyC/

упаковка метки и текстового поля в div

<div id=reasondiv>
            <label for="reaason">Reason</label>
            <input id="reason" name="reason"  />
 </div>

затем jquery:

$("#reasondiv").hide();
$("input[name=choice]:radio").click(function(){

   if($(this).val()=='Yes')
      $("#reasondiv").show();
   else
       $("#reasondiv").hide();

});

Answer 3

Этот код должен делать то, что вы хотите: http://jsfiddle.net/KJCDS/

Мне пришлось немного изменить HTML.

HTML:

<form  id="Form" method="get" action="">
<fieldset>
<legend>form</legend>
Yes:<input name="choice" type="radio" value="Yes" checked='true'/><br>
No:<input name="choice" type="radio" id='rdoNo' value="No"/><br>
<label id="lblReason" for="reaason">Reason</label>
<input id="reason" name="reason"  />
</fieldset>
</form>

JS (с использованием jquery):

$(document).ready(function() {

    $('#reason').hide();
    $('#lblReason').hide();

    $('input[type=radio]').change(function(){
        if($('#rdoNo').is(':checked'))
        {
            $('#reason').show();
            $('#lblReason').show();
        }
        else
        {
            $('#reason').hide();
             $('#lblReason').hide();
        }

        ;});
});