根据单选按钮选择显示表单域

我有一个表单，我只需要根据顶部单选按钮的选择显示某些选项。 由于某种原因，它无法正常工作。 有任何想法吗？ 下面是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'); } }); 

这是一个工作小提琴

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。

看到你的更新小提琴