如何使用jQuery清除特定div中的所有input字段？
我正在尝试使用jQuery来做一件简单的事情：每当表单加载时，清除div中一组input字段的input字段，或者用户更改选取列表; 但是我有一个让select器工作的魔鬼。
首先，这是我的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中的HTMLinput元素：
<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 = ""; }) }
然而，没有任何反应……所以，我不能让select器正确。 有人看到我做错了吗？
小提琴： http : //jsfiddle.net/simple/BdQvp/
你可以这样做：
我已经在小提琴中添加了两个button来说明如何通过button在这些input字段中插入或清除值。 您只需捕获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.'); }
更新：
看看Beena下面这个很好的答案 ，以及更普遍的方法。
此function用于清除表单中的所有元素，包括单选button，checkbox，select，多选，密码，文本，文本区，文件。
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; } }); }
从https://stackoverflow.com/a/10892768/2087666启发，但我使用select器而不是类，并更喜欢如果在开关：;
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(''); } }); }
这应该几乎处理任何select器内的所有input。
改变这个：
<div class=fetch_results>
对此：
<div id="fetch_results">
那么以下应该工作：
$("#fetch_results input").each(function() { this.value = ""; })
我看到的几个问题。 fetch_results是一个类，而不是一个Id，每个函数看起来不正确。
$('.fetch_results:input').each(function() { $(this).val(''); });
只要记住，如果您最终收到无线电或检查button，您将不得不清除选中的属性，而不是值。
如果你想留在一个类级select器，那么你可以做这样的事情（使用来自Mahn的同一个jfiddle）
$("div.fetch_results input:text").each(function() { this.value = "testing"; })
这将只使用fetch_results类来selectdiv内的文本input框。
和任何jQuery一样，这只是一个方法。 问10个jQuery人这个问题，你会得到12个答案。
$.each($('.fetch_results input'), function(idx, input){ $(input).val(''); });
