Показать поле, если переключатель установлен с помощью jQuery - PullRequest
Новая
       37

Показать поле, если переключатель установлен с помощью jQuery

4 голосов
/ 25 сентября 2010

У меня есть следующий код: 

    <fieldset>
        <legend>Do you currently have SolidWorks</legend>

        <ul>
            <li><label for=""><input type="radio" name="solidworks" value="Yes" id="rdYes" /> Yes</label></li>
            <li><label for=""><input type="radio" name="solidworks" value="No" id="rdNo" /> No</label></li>
        </ul>
    </fieldset>

    <fieldset id="boxReseller" style="display:none;">
        <legend>Who is your SolidWorks reseller?</legend>
        <ul>
            <li><label for=""><input type="radio" name="reseller" value="Cad Connect" /> Cad Connect</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Cadtek" /> Cadtek</label></li>
            <li><label for=""><input type="radio" name="reseller" value="CCSL" /> CCSL</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Innova" /> Innova</label></li>
            <li><label for=""><input type="radio" name="reseller" value="NT CAD/CAM" /> NT CAD/CAM</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Solid Engineer" /> Solid Engineer</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Solid Solutions Ireland" /> Solid Solutions Ireland</label></li>
            <li><label for=""><input type="radio" name="reseller" value="Solid Solutions Management" /> Solid Solutions Management</label></li>
            <li><label for=""><input type="radio" name="reseller" value="TMS Scotland" /> TMS Scotland</label></li>
        </ul>

    </fieldset>

Что я хочу сделать, это скрыть второй набор полей по умолчанию, и если человек выберет Да, появится окно, и если они выберут Нет или Да,Если флажок не установлен, окно снова будет скрыто.

Кто-нибудь может помочь?Спасибо.

Ответы [ 5 ]

16 голосов
/ 25 сентября 2010

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

$("input[name='solidworks']").change(function() {
  $("#boxReseller").toggle(this.value == "Yes");
});​​​​​​
$("input[name='solidworks']:checked").change(); //trigger correct state onload

Вы можете попробовать с разметкой в ​​вопросе здесь , и попробовать предварительно проверенную версию "Да" здесь .

3 голосов
/ 25 сентября 2010

Демо

http://jsfiddle.net/Wpt3Y/

jQuery(function(){
        jQuery("input[name=solidworks]").change(function(){          


            if ($(this).val() == "Yes") {
            jQuery("#boxReseller").slideDown()
            }
            else {
            jQuery("#boxReseller").slideUp();
            }                                                            
       });
});

1009 *

1 голос
/ 23 октября 2011

Ref Nick Craver - Хорошее решение, хотя оно более удобное, как показано ниже. 

  $("input[name='solidworks']").change(function() {
    $("#boxReseller").toggle();
 });​​​​​​
$("input[name='solidworks']:checked").change(); //trigger correct state onload

Оставляя переключатель в качестве подстановочного знака (неопределенная терминология, которую вы предпочитаете), я обнаружил, что она работает более эффективно.Хорошо, хотя, спасибо :)

0 голосов
/ 25 сентября 2010 
$(document).ready(function() {
    $("input[name=solidworks]").change(function() {
        if ($this).val() == "Yes") {
            $("#boxReseller").slideDown('fast');
        }
        else {
            $("#boxReseller").hide('fast');
        }
    })
})
0 голосов
/ 25 сентября 2010

Что-то вроде (извините, если есть опечатки, мой кофе еще не готов).будет редактировать, как только я получу свой эликсир. 

<script>attr('checked','checked')
     $("#fs:checkbox").click(function(){
              if($("#rdYes:checked").attr('checked','checked'))
              {
                 $("#boxReseller").css('display', 'block'); })
              }          
     });
</script>
...