HTML表单根据选择切换隐藏/显示字段 [英] HTML Form Toggle Hide/Show fields based on selection

问题描述

在我的表格中（如下所示），我有一套无线电选项。如果用户选择其他的最后一个选项，我希望div显示并向下滑动，以便他们可以在文本框中输入自定义值。我也希望能够在同一个表单中多次使用同一个进程的多个实例（显然有不同的ID）。

以下是它的设置方式：如果用户选择类为color_toggle并且值等于其他的单选按钮，我希望它显示元素ID指定色彩盒。如果他们选择不同的单选按钮，我希望隐藏相同的元素。

以下是答案，以防其他人遇到同样的问题。
我的表单元素显示在这里：

 < fieldset class =w100> 
< div class =rowElem align-left> 
< input type =radioid =Grayname =colorvalue =Grayclass =color_togglechecked> 
< label>灰色（标准）< / label> 
< / div> 
< div class =rowElem align-left> 
< input type =radioid =All Yellowname =colorvalue =All Yellowclass =color_toggle> 
< label>全部黄色< / label> 
< / div> 
< div class =rowElem align-left> 
< input type =radioid =Yellow Posts Black Panelsname =colorvalue =Yellow Posts Black Panelsclass =color_toggle> 
< label>黄色贴文/黑色面板< / label> 
< / div> 
< div class =rowElem align-left> 
< input type =radioid =other_colorname =colorvalue =Otherclass =color_toggle> 
< label>其他< / label> 
< / div> 
< div id =specify_color_boxclass =form-subscr-field rowElem align-leftstyle =display：none;> 
< label for =指定色彩id =指定色彩标签>指定自定义色彩：< / label> 
< input id =指定色彩type =textname =指定色彩class =inputboxsize =10value =输入自定义颜色onFocus =if（this.value =='输入自定义颜色'）this.value =''; onBlur =if（this.value ==''）this.value ='Enter custom color';/> 
< / div> 
< / fieldset> 
  

我的jQuery显示在这里：

<$ （）{
$（input [name ='color']）。click（function（）{
if （$（this）.val（）==Other）{
$（＃specify_color_box）。slideDown（fast）;
}
else {
$（＃specify_color_box）。slideUp（fast）;
}
}）;
}）;

解决方案

以下是答案，以防其他人拥有相同问题。我的表单元素显示在这里：

 < fieldset class =w100> 
< div class =rowElem align-left> 
< input type =radioid =Grayname =colorvalue =Grayclass =color_togglechecked> 
< label>灰色（标准）< / label> 
< / div> 
< div class =rowElem align-left> 
< input type =radioid =All Yellowname =colorvalue =All Yellowclass =color_toggle> 
< label>全部黄色< / label> 
< / div> 
< div class =rowElem align-left> 
< input type =radioid =Yellow Posts Black Panelsname =colorvalue =Yellow Posts Black Panelsclass =color_toggle> 
< label>黄色贴文/黑色面板< / label> 
< / div> 
< div class =rowElem align-left> 
< input type =radioid =other_colorname =colorvalue =Otherclass =color_toggle> 
< label>其他< / label> 
< / div> 
< div id =specify_color_boxclass =form-subscr-field rowElem align-leftstyle =display：none;> 
< label for =指定色彩id =指定色彩标签>指定自定义色彩：< / label> 
< input id =指定色彩type =textname =指定色彩class =inputboxsize =10value =输入自定义颜色onFocus =if（this.value =='输入自定义颜色'）this.value =''; onBlur =if（this.value ==''）this.value ='Enter custom color';/> 
< / div> 
< / fieldset> 
  

我的jQuery显示在这里：

<$ （）{
$（input [name ='color']）。click（function（）{
if （$（this）.val（）==Other）{
$（＃specify_color_box）。slideDown（fast）;
}
else {
$（＃specify_color_box）。slideUp（fast）;
}
}）;
}）;

On my form (shown below) I have a set of radio options. If the user selects the last option for "Other", I want the div to show and slide down where they can enter a custom value in a text box. I also want to be able to have multiple instances of this same process multiple times in the same form (with different IDs obviously).

Here's how it's set up: If the user selects the radio button who's class is "color_toggle" and the value equals "Other", I want it to show the element id "specify_color_box". If they select a different radio button, I want that same element hidden.

Here's the answer just in case anyone else has the same issue. My form element is shown here:

<fieldset class="w100">
       <div class="rowElem align-left">
      <input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked >
           <label>Gray (Standard)</label>
        </div>
       <div class="rowElem align-left">
            <input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle">
            <label>All Yellow</label>
          </div>
       <div class="rowElem align-left">
        <input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle">
          <label>Yellow Posts / Black Panels</label>
         </div>
         <div class="rowElem align-left">
       <input type="radio" id="other_color" name="color" value="Other" class="color_toggle">
        <label>Other</label>
       </div>
       <div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;">
       <label for="specify_color" id="specify_color_label">Specify Custom Color: </label>
       <input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/>
      </div>
</fieldset>

and my jQuery is shown here:

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

解决方案

Here's the answer just in case anyone else has the same issue. My form element is shown here:

<fieldset class="w100">
       <div class="rowElem align-left">
      <input type="radio" id="Gray" name="color" value="Gray" class="color_toggle" checked >
           <label>Gray (Standard)</label>
        </div>
       <div class="rowElem align-left">
            <input type="radio" id="All Yellow" name="color" value="All Yellow" class="color_toggle">
            <label>All Yellow</label>
          </div>
       <div class="rowElem align-left">
        <input type="radio" id="Yellow Posts Black Panels" name="color" value="Yellow Posts Black Panels" class="color_toggle">
          <label>Yellow Posts / Black Panels</label>
         </div>
         <div class="rowElem align-left">
       <input type="radio" id="other_color" name="color" value="Other" class="color_toggle">
        <label>Other</label>
       </div>
       <div id="specify_color_box" class="form-subscr-field rowElem align-left" style="display:none;">
       <label for="specify_color" id="specify_color_label">Specify Custom Color: </label>
       <input id="specify_color" type="text" name="specify_color" class="inputbox" size="10" value="Enter custom color" onFocus="if(this.value=='Enter custom color') this.value='';" onBlur="if(this.value=='') this.value='Enter custom color';"/>
      </div>
</fieldset>

and my jQuery is shown here:

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

这篇关于HTML表单根据选择切换隐藏/显示字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！