HTML表单根据选择切换隐藏/显示字段

在我的表格上（如下所示）我有一套收音机选项。 如果用户选择“其他”的最后一个选项，我希望div显示并向下滑动，他们可以在文本框中输入自定义值。 我还希望能够以相同的forms多次使用同一个进程的多个实例（显然具有不同的ID）。

以下是它的设置方式：如果用户选择的单选按钮是“color_toggle”且值等于“Other”，我希望它显示元素id“specify_color_box”。 如果他们选择不同的单选按钮，我希望隐藏相同的元素。

这是答案，以防万一其他人有同样的问题。 我的表单元素如下所示：

 
  Gray (Standard) 
 
  All Yellow 
 
  Yellow Posts / Black Panels 
 
  Other 
 
 Specify Custom Color:   
  

我的jQuery显示在这里：

 $(document).ready(function(){ $("input[name='color']").click(function(){ if($(this).val() == "Other") { $("#specify_color_box").slideDown("fast"); } else{ $("#specify_color_box").slideUp("fast"); } }); }); 

Answer 1

您可以检查单选按钮的选中状态，如下所示：

 $('#Other').is(':checked') 

这样，您甚至不必依赖单选按钮的值 – 您可以决定根据任何原因更改它 – 只是它的状态。

注意：如果您的元素有ID，请使用它来选择它，这是最快的方法。 选择器越复杂，选择越慢！

---

应用于您的代码，它提供以下内容（反转slideUp / slideDown以正确匹配条件）：

 $(document).ready(function() { $("#specify_color_box").css("display", "none"); $(".color_toggle").click(function() { if ($('#other_color').is(':checked')) { $("#specify_color_box").slideDown("fast"); } else { $("#specify_color_box").slideUp("fast"); } }); });​ 

DEMO

Answer 2

这是答案，以防万一其他人有同样的问题。 我的表单元素如下所示：

 
    
         Gray (Standard)    
    
            All Yellow     
    
         Yellow Posts / Black Panels     
     
        Other    
    
    Specify Custom Color:        
  

我的jQuery显示在这里：

 $(document).ready(function(){  $("input[name='color']").click(function(){  if($(this).val() == "Other") {    $("#specify_color_box").slideDown("fast");  }  else{    $("#specify_color_box").slideUp("fast");  } }); });