Блог

Я использую фрагмент jQuery для создания эффекта, описанного на этом сайте:

http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/

Что мне нужно, так это иметь возможность отображать другой div на основе выбора переключателя. Я смог успешно реализовать то, что было продемонстрировано на сайте … однако я могу сделать это только для одного выбора. Я полагаю, что повторение кода, скажем, 5 раз, для 5 разных разделов, вероятно, было бы действительно неэффективным.
Чтобы упростить задачу, я, вероятно, назову divs номерами 1-5. Большое спасибо за вашу помощь!

 <fieldset>
<ol class="formset">
    <li><label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/></li>

    <li><label for="lname1">Last Name: </label>
<input type="text" id="lname1" value="" name="lname1"/></li>

    <li><label for="email1">Email Address: </label><br />
<input type="text" id="email1" value="" name="email1" /></li>

    <li><label for="age1">Are you above 21 yrs old?</label>
<input type="radio" name="age1" value="Yes" class="aboveage1" /> Yes
<input type="radio" name="age1" value="No" class="aboveage1" /> No
<input type="radio" name="age1" value="Maybe" class="aboveage1" /> Maybe
    </li>

</ol>
<ol id="parent1" class="formset">
<li><strong>Parent/Guardian Information:</strong></li>
    <li><label for="pname1">Parent Name: </label>
<input type="text" id="pname1" value="" name="pname1"/></li>
    <li><label for="contact1">Contact No.: </label>
<input type="text" id="contact1" value="" name="contact1"/></li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />
</fieldset>
  

Текущий код:

 $(document).ready(function() { 
    $("#parent1").css("display","none");
    $(".aboveage1").click(function() { 
        if ($('input[name=age1]:checked').val() == "No" ) {
            $("#parent1").slideDown("fast"); //Slide Down Effect 
        } 
        else {
            $("#parent1").slideUp("fast"); //Slide Up Effect 
        }
    });
});
  

Если вы хотите сдвинуть элементы, соответствующие различным ответам на ваш aboveage, и divs имеют тот же идентификатор, что и значения ответов, вы можете сделать следующее:

Примечание: для работы вам придется переименовать ваши div, соответствующие ответам из formset, в sub-formset.

 $(document).ready(function() { 
    $('ol.sub-formset').css("display","none"); // display none on all ol that doesn't have formset class
    $('input[class^="aboveage"]').click(function() { 
        $('ol[class!="formset"]').slideUp("fast"); //Slide Up Effect 
        $('#'   $(this).val()).slideDown("fast"); //Slide Down Effect 
    });
});
  

Рабочий пример: http://jsfiddle.net/L5qfn /