Показать поля формы на основе выбора переключателя

Question

У меня есть форма, в которой мне нужно показывать только определенные параметры, основанные на выборе переключателей вверху. По какой-то причине он работает неправильно. Есть идеи? Ниже приведен jsfiddle. Пожалуйста, дайте мне знать, если это потребует дальнейшего объяснения, и спасибо!

http://jsfiddle.net/jmL7w2ed/

$('#choose-one').change(function() { 
    if ($('#choose-one:checked').val() == 'Sold') { 
     $('.resultDetail').hide(); 
     $('.resultDetail.sold').show(); 
    } else if ($('#choose-one:checked').val() == 'Not Demoed') { 
     $('.resultDetail').hide(); 
     $('.resultDetail.notDemoed').show(); 
    } else if ($('#choose-one:checked').val() == 'Not Sold') { 
     $('.resultDetail').hide(); 
     $('.resultDetail.notSold').show(); 
    } 
}); 

Answer 1

Ваш выбор основан на ID, так что всегда выбирают первый радиоприемник.

Лучше выбирать радиостанции в зависимости от их имени следующим образом:

$('input[type=radio][name=choose-one]')

и вы можете получить доступ к значению, используя $(this).val() вместо выбора набора снова.

$('input[type=radio][name=choose-one]').change(function() { 
     //console.log($(this).val()); 

     var value = $(this).val(); 

     if (value == 'Sold') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.sold').slideDown('500'); 
     } else if (value == 'Not Demoed') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.notDemoed').slideDown('500'); 
     } else if (value == 'Not Sold') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.notSold').slideDown('500'); 
     } else if (value == 'Demoed') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.notSold').slideDown('500'); 
     } 
    }); 

Вот Working Fiddle

Answer 2

Я обновил свой скрипку следующее:

$('.resultDetail').hide(); 
    $('#choose-one').on('change',function() { 
     if ($('#choose-one:checked').val() == 'Sold') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.sold').slideDown('500'); 
     } else if ($('#choose-one:checked').val() == 'Not Demoed') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.notDemoed').slideDown('500'); 
     } else if ($('#choose-one:checked').val() == 'Not Sold') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.notSold').slideDown('500'); 
     } else if ($('#choose-one:checked').val() == 'Demoed') { 
      $('.resultDetail').slideUp('500'); 
      $('.resultDetail.notSold').slideDown('500'); 
     } 
    }); 

Самая важная часть была в том числе JQuery, который не был добавлен в ваш скрипку. Убедитесь, что вы включили jQuery.

See your updated fiddle