jquery - 根据单选按钮选择显示表单字段

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，因此它始终选择第一个 radio 。

最好根据 radio 名称选择 radio ，如下所示:

$('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