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

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

    <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)

Решение Вопроса

хотя оно более удобное, как показано ниже

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

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

 Nick Craver25 окт. 2011 г., 22:22
Это не работает более эффективно, потому что не подходит для "рабочей" части во многих условиях. Кэширование браузера, нажатие передdocument.ready, или же возвращаясь на ту же страницу, вы можете оставить свой переключатель внапротив государство. Любой из этих трех нарушает подход в этом ответе ... поэтому у меня есть явная проверка значения.

демонстрация

http://jsfiddle.net/Wpt3Y/

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


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

 Praveen Prasad25 сент. 2010 г., 00:00
в этом случае вы должны проверить значение радио в DOM готов и скрыть / показать свой BOX
 Cameron24 сент. 2010 г., 23:42
Что делать, если пользователь обновляет страницу и «Да» уже проверено? Коробка скрыта.

если есть опечатки, мой кофе еще не готов).

 <fieldset id="fs">
        <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>

Есть способы улучшить внешний вид, но мой кофе не готов. будет редактировать, как только я получу свой эликсир.

<script>attr('checked','checked')
     $("#fs:checkbox").click(function(){
              if($("#rdYes:checked").attr('checked','checked'))
              {
                 $("#boxReseller").css('display', 'block'); })
              }          
     });
</script>
 Liam Bailey24 сент. 2010 г., 23:26
Ненужный код: когда вы нажимаете кнопку «Нет», он автоматически снимает флажок «Да».
$(document).ready(function() {
    $("input[name=solidworks]").change(function() {
        if ($this).val() == "Yes") {
            $("#boxReseller").slideDown('fast');
        }
        else {
            $("#boxReseller").hide('fast');
        }
    })
})

Вы могли бы сделать это:

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

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

 Jordan Gray13 окт. 2011 г., 13:07
@Nick: очень элегантное решение, я добавлю его в свою панель инструментов! (Если вы качнете таким образом, вы можете сделать это еще более кратким: удалите последнюю строку и перепишите третью строку как}).filter(':checked').change();.)
 Ryan Ternier24 сент. 2010 г., 23:31
Лучше ответ, чем мой :)
 Bob.at.Indigo.Health11 мар. 2013 г., 06:01
Я только учусь jQuery (и JS). В моем приложении возможно, что ни одна из радиокнопок изначально не проверена, и в этом случае последняя строка не выбирает ничего для запуска. Как мне справиться с этим делом?
 Bob.at.Indigo.Health11 мар. 2013 г., 08:20
Не берите в голову ... Я только что понял, что пропустил "style = display: none", из-за которого второй набор переключателей изначально скрыт.
 Cameron24 сент. 2010 г., 23:51
Это прекрасно работает, можете ли вы объяснить, как это работает, пожалуйста, так как это кажется намного более запутанным, чем стандартные операторы if и else, которые использовали другие, но работает лучше.
 Nick Craver25 сент. 2010 г., 00:26
@Cameron - Конечно :).toggle(bool) принимает логическое значение, чтобы позвонить.show() (если это правда) или.hide() (если false), поэтому мы просто проверяем, что только что измененная кнопка переключателя была "Да" или нет. Последняя строка получает выбранный и запускает обработчик для него ... снова, если его значение равно "Да", оно показывает, в противном случае оно скрывается, имеет смысл?

Ваш ответ на вопрос