Show form fields based on radio button selection

问题:

I have a form that I need to only show certain options based on the selection of the radio buttons at the top. For some reason it is not working properly. Any ideas? Below is the jsfiddle. Please let me know if this needs further explanation, and thanks!

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();
    }
});

回答1:

Your selection is based on an ID so it is always selecting the first radio.

It is better to select the radios based on their name as follows :

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

and you can access the value using $(this).val() rather than selecting a set again.

 $('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');
        }
    });

Here is a Working Fiddle

回答2:

I updated your fiddle to the following:

$('.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');
        }
    });

The most important part was including jQuery, which was not added to your fiddle. Please ensure that you have included jQuery.

See your updated fiddle