Question

我有一个很长的注册表单，并希望隐藏一些字段，只在某个输入字段填充文本时显示它们，如果用户在此字段中键入一些文本，则其他表单字段将显示。

我已经看过hide并显示div但是在将表单元素隐藏并在某个触发器上显示它们时会遇到一些麻烦（用文本填充表单）

任何人都可以指出我如何实施的正确方向查询中的这种功能？ thx in advanche！

Answer 1

由于没有提供具体的问题详情，我汇总了一个简单的例子，希望能帮助您解决问题。

HTML

<div id="field1wrapper" style="visibility: hidden;">
    <label for="field1">Field 1:</label>
    <input type="text" id="field1" /><span>&lt;-- write on me</span>
</div>
<div id="field2wrapper">
    <label for="field2">Field 2:</label>
    <input type="text" id="field2" />
</div>

的JavaScript

$("#field1").keyup(function()
{
    if($("#field1").val() != "")
    {
        $("#field2wrapper").css("visibility", "visible");
    }
    else
    {
        $("#field2wrapper").css("visibility", "hidden");
    }
});

Answer 2

的 You could do something like this: 的

<强> HTML：

<label for="txt1">Field 1</label> <input type="text" id="txt1" /> <label class="secondary hidden" for="txt2">Field 2</label> <input class="secondary hidden" type="text" id="txt2" /> <label for="txt3">Field 3</label> <input type="text" id="txt3" /> <label class="secondary hidden" for="txt4">Field 4</label> <input class="secondary hidden" type="text" id="txt4" />

<强> CSS：

input { display: block; margin-bottom: 10px; } .hidden { display: none; visibility: hidden; }

<强> jQuery的：

var $txt1 = $("#txt1"), $secondary = $(".secondary"); $txt1.keyup(function() { $secondary.toggleClass("hidden", $(this).val() == ""); });

使用 toggleClass 可以传入一个布尔值来添加或删除类。绑定到 keyup 可让您立即隐藏或显示，具体取决于字段的值vs等待onblur，就像使用 一样change

Answer 3

您使用的是JQuery change（）事件处理程序吗？

http://api.jquery.com/change/

有如何使用它来触发页面上的事件的例子。

jquery隐藏某些表单元素，直到填充了某个文本字段？

3 个答案: