HTML 表单切换隐藏/显示基于选择的字段答案

【问题标题】：HTML Form Toggle Hide/Show fields based on selectionHTML 表单切换隐藏/显示基于选择的字段
【发布时间】：2012-03-05 19:58:37
【问题描述】：

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

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

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

<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>

我的 jQuery 显示在这里：

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

【问题讨论】：

标签： javascript jquery toggle forms

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

【讨论】：

我已将我的代码更新为我现在所拥有的......我试过你的，但由于某种原因盒子总是打开......你能看看我顶部的代码并告诉我发生了什么吗？
您已更改“其他”单选按钮的 ID...将代码更改为：$('#other_color').is(':checked')
出于某种原因，当我在 JSFiddle 中运行您的代码时，它工作正常。但是当我在我的网站上运行它时，会显示文本框，并且切换不起作用？ DEMO
如果我没有看到你的代码，我无法帮助你，我没有坐在你旁边;-) 打开你的 javascript 控制台，看看你是否没有错误；检查您的选择器是否正常；放置一些断点来检查代码的执行...
:( 我不知道该怎么办......我没有看到任何错误，我不明白为什么它在小提琴中可以正常工作，但在我的网站上却不行？？其他一切正常

【解决方案2】：

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

<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>

我的 jQuery 显示在这里：

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

【讨论】：