jQuery隱藏某些表單元素直到某個文本字段已被填充？

我有一個很長的註冊表單，想要隱藏幾個字段，並且只有當某個輸入字段用文本填充時才顯示它們，如果用戶在此字段中鍵入其他表單字段將顯示的某些文本。jQuery隱藏某些表單元素直到某個文本字段已被填充？

我已經看過隱藏和顯示的div，但有一些麻煩表單元素隱藏和顯示他們在一定的觸發（填充用文字形式）

任何人都可以點我就如何實施正確的方向這樣的功能在查詢？ thx在advanche！

2012-03-29 Rubytastic

由於沒有提供具體的問題細節，所以我彙總了一個簡單的例子，希望能夠幫助您開始解決問題。

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"); 
    } 
});

來源

2012-03-29 11:37:13

啊那樣..使用keyup和val函數來檢查值是否爲空，我以爲我需要一些觸發器，但數數找到正確的方法來做到這一點。我嘗試這個認爲這工作完全正確thx！ – Rubytastic 2012-03-29 11:38:27

作品完美只有我的提交按鈕，這是我隱藏的元素下面沒有正確放置，你會碰巧知道一個修復呢？謝謝！ – Rubytastic 2012-03-29 12:07:49

@Rubytastic，也許你想要這樣的東西：http://jsfiddle.net/g6JKy/1/？沒有正確放置是什麼意思？ – 2012-03-29 12:17:35

您是否使用JQuery change（）事件處理程序？

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

還有如何使用它來觸發頁面上的事件的例子。

來源

2012-03-29 11:29:18 Hairball

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讓你牛逼o傳入一個布爾值來添加或刪除類。並結合keyup可以讓你立即隱藏或顯示取決於字段的值VS，你會與change等待的onblur。

來源

2012-03-29 11:42:54

jQuery隱藏某些表單元素直到某個文本字段已被填充？

回答

相關問題