如何用jQuery清除特定div中的所有輸入字段？

Question

我試圖使用jQuery做一個簡單的事情：明確一個div中的一組輸入欄的輸入字段時加載窗體，或者如果用戶更改選擇列表;但我有一個讓選擇器工作的時間。

首先，這是我的onclick和onload事件觸發：

<form name="EditGenotype" action="process_GenotypeMaint.php" method="POST" onsubmit="return false" onload=clear_fetch() > 

，並在領料：

<SELECT multiple size=6 NAME="marker" onchange=show_marker() onclick=clear_fetch() > 

接下來，這裏是在div我的HTML輸入元素我想清楚了：

<div class=fetch_results> 
     <fieldset> 
    <LEGEND><b>Edit Genotype, call 1</b></LEGEND> 
     <boldlabel>Allele_1</boldlabel><input id=allele_1_1 name=allele_1_1 size=5 > 
     <boldlabel>Allele_2</boldlabel><input id=allele_1_2 name=allele_1_2 size=5 > 
     <boldlabel>Run date</boldlabel><input id=run_date1 name=run_date1 size=10 disabled=true> 
     </fieldset> 
     <fieldset> 
    <LEGEND><b>Edit Genotype, call 2</b></LEGEND> 
     <boldlabel>Allele_1</boldlabel><input id=allele_2_1 name=allele_2_1 size=5 > 
     <boldlabel>Allele_2</boldlabel><input id=allele_2_2 name=allele_2_2 size=5 > 
     <boldlabel>Run date</boldlabel><input id=run_date2 name=run_date2 size=10 disabled=true> 
     </fieldset> 
     <fieldset> 
    <LEGEND><b>Edit Genotype, call 3</b></LEGEND> 
     <boldlabel>Allele_1</boldlabel><input id=allele_3_1 name=allele_3_1 size=5 > 
     <boldlabel>Allele_2</boldlabel><input id=allele_3_2 name=allele_3_2 size=5 > 
     <boldlabel>Run date</boldlabel><input id=run_date3 name=run_date3 size=10 disabled=true> 
     </fieldset> 
    </div> 

最後，這裏是我的腳本：

function clear_fetch() {  

    $('#fetch_results:input', $(this)).each(function(index) { 
     this.value = ""; 
    }) 

    } 

然而，什麼也沒有發生......所以，我不能有選擇是正確的。有人看到我做錯了嗎？

Answer 1

小提琴：http://jsfiddle.net/simple/BdQvp/

你能做到像這樣：

我在小提琴增加了兩個按鈕來說明如何，你可以通過按鈕的輸入域插入或清晰的價值觀。你剛纔捕獲的onClick事件並調用該函數。

//Fires when the Document Loads, clears all input fields 
$(document).ready(function() { 
    $('.fetch_results').find('input:text').val('');  
}); 

//Custom Functions that you can call 
function resetAllValues() { 
    $('.fetch_results').find('input:text').val(''); 
} 

function addSomeValues() { 
    $('.fetch_results').find('input:text').val('Lala.'); 
} 

更新：

退房this great answer below by Beena還有一個更普遍的方法。

Answer 2

夫婦的問題，我看到的。 fetch_results是一個類，而不是一個Id，每個函數看起來不正確。

$('.fetch_results:input').each(function() { 
     $(this).val(''); 
}); 

只是一定要記住，如果你最終收音機或複選按鈕，你將不得不清除選中屬性，而不是價值。

Answer 3

更改此：

<div class=fetch_results> 

要這樣：

<div id="fetch_results"> 

然後下面應該工作：

$("#fetch_results input").each(function() { 
     this.value = ""; 
    })​ 

http://jsfiddle.net/NVqeR/

Answer 4

如果你想留類級別s選民，那麼你可以做這樣的事情（使用相同的jfiddle從馬恩）

$("div.fetch_results input:text").each(function() { 
    this.value = "testing"; 
})​ 

這將與fetch_results類專區內只選擇文本輸入框。

與任何jQuery的，這只是一個辦法做到這一點。問10個jQuery人這個問題，你會得到12個答案。

Answer 5

此功能用於清除表單中的所有元素，包括單選按鈕，複選框，選擇，多選，密碼，文本，textarea，文件。

function clear_form_elements(class_name) { 
    jQuery("."+class_name).find(':input').each(function() { 
    switch(this.type) { 
     case 'password': 
     case 'text': 
     case 'textarea': 
     case 'file': 
     case 'select-one': 
     case 'select-multiple': 
     case 'date': 
     case 'number': 
     case 'tel': 
     case 'email': 
      jQuery(this).val(''); 
      break; 
     case 'checkbox': 
     case 'radio': 
      this.checked = false; 
      break; 
    } 
    }); 
} 

Answer 6

從https://stackoverflow.com/a/10892768/2087666靈感，但我改用選擇一類的，喜歡如果超過開關：

function clearAllInputs(selector) { 
    $(selector).find(':input').each(function() { 
    if(this.type == 'submit'){ 
      //do nothing 
     } 
     else if(this.type == 'checkbox' || this.type == 'radio') { 
     this.checked = false; 
     } 
     else if(this.type == 'file'){ 
     var control = $(this); 
     control.replaceWith(control = control.clone(true)); 
     }else{ 
     $(this).val(''); 
     } 
    }); 
} 

這應該照顧幾乎所有輸入的任何選擇內。

Answer 7

$.each($('.fetch_results input'), function(idx, input){ 
    $(input).val(''); 
});