基于单选按钮选择显示表单域 [英] Show form fields based on radio button selection

问题描述

我有一个表单，我只需要根据顶部单选按钮的选择来显示某些选项。由于某些原因，它不能正常工作。有任何想法吗？下面是jsfiddle。请让我知道这是否需要进一步解释，谢谢！

http://jsfiddle.net/jmL7w2ed/

  $（'＃choose-one'）。change（函数（）{
 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（）; 
 } 
}）; 
  

解决方案

您的选择基于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 S旧'）{
 $（'。resultDetail'）。slideUp（'500'）; 
 $（'。resultDetail.notSold'）。slideDown（'500'）; 
} else if（value =='Demoed'）{
 $（'。resultDetail'）。slideUp（'500'）; 
 $（'。resultDetail.notSold'）。slideDown（'500'）; 
} 
}）; 
  

这是工作小提琴

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

解决方案

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

这篇关于基于单选按钮选择显示表单域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！