根据单选按钮选择显示表单字段答案

【问题标题】：Show form fields based on radio button selection根据单选按钮选择显示表单字段
【发布时间】：2015-09-10 13:46:44
【问题描述】：

我有一个表单，我只需要根据顶部单选按钮的选择显示某些选项。由于某种原因，它无法正常工作。有任何想法吗？下面是jsfiddle。如果需要进一步解释，请告诉我，谢谢！

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

【问题讨论】：

标签： jquery forms

【解决方案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

【讨论】：

【解决方案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

【讨论】：

嗯...我已经添加了它，但一定没有正确保存。谢谢。
这不是解决方案.. 分区不会根据收音机选择上下滑动
它似乎仍然无法正常工作。只有第一个选项（“已售出”）有效。如果您选择任何其他选项，它们根本不起作用。有 3 个不同的“结果详细信息”选择菜单，它们应根据单选按钮中的当前值显示/隐藏。
@KAD 是的，你是对的。我实际上没有注意到这一点。我认为 OP 的问题是由于没有按照小提琴包含 jQuery。