根據單選按鈕選擇顯示錶單域

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，因此它總是選擇所述第一無線電。

這是更好地選擇基於其名稱的電臺如下：

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

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。

See your updated fiddle