如何使用 jQuery 清除特定 div 中的所有输入字段？答案

【问题标题】：How to clear all input fields in a specific div with jQuery?如何使用 jQuery 清除特定 div 中的所有输入字段？
【发布时间】：2012-05-19 13:30:38
【问题描述】：

我正在尝试使用 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 = "";
    })

  }

但是，什么都没有发生……所以，我不能让选择器正确。有人看到我做错了吗？

【问题讨论】：

这对我有用：$(".fetch_results:input").val("");

标签： jquery

【解决方案1】：

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

你可以这样做：

我在 Fiddle 中添加了两个按钮来说明如何通过按钮在这些输入字段中插入或清除值。您只需捕获 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 以了解更通用的方法。

【讨论】：

SELECT 选项怎么样？
如果您有任何建议，请随时添加，这并不是所有方法的完整答案。
以下定位将清除所有类型 $('.fetch_results').find(':input').val('');

【解决方案2】：

该函数用于清除表单中的所有元素，包括单选按钮、复选框、选择、多选、密码、文本、文本区域、文件。

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

【讨论】：

将 jQuery 更改为 $，但这对所有列出的类型都适用！
您无法将值设置为文件输入，甚至无法将其设为空白。
需要为选择的选项添加重置。
完美运行，对于“select2”类型的元素，我对其进行了一些更改，例如 - case 'select-one': case 'select-multiple': $(this).val('').change(); // via change(), working for select2 also break;

【解决方案3】：

改变这个：

 <div class=fetch_results>

到这里：

 <div id="fetch_results">

那么以下应该可以工作：

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

http://jsfiddle.net/NVqeR/

【讨论】：

赞成，又好又简单。将input 更改为:input，它也会抓取文本区域等。
@mikethirteen 请注意，此答案有点陈旧，仅解决了 OP 代码不起作用的原因。如果您只是想清除所有字段，$("#fetch_results input").val(""); 可以完成这项工作并且更加简洁。

【解决方案4】：

灵感来自https://stackoverflow.com/a/10892768/2087666，但我使用选择器而不是类，并且更喜欢 if over switch：

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('');
      }
   });
}

这应该可以处理任何选择器中的几乎所有输入。

【讨论】：

else{ $(this).val(''); } 用于默认情况，您可以使用空字符串清除它们。

【解决方案5】：

我看到的几个问题。 fetch_results 是一个类，而不是一个 Id，并且每个函数看起来都不正确。

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

请务必记住，如果您最终使用单选按钮或选中按钮，则必须清除选中的属性，而不是值。

【讨论】：

【解决方案6】：

只需删除 div 中的所有输入，并在目标获取大部分内容时使用输入前面的冒号。

$('#divId').find(':input').val('');

【讨论】：

正是我想要的。这应该是正确的答案。谢谢@tanner_gram
这适用于所有输入@Tanner_Gram 吗？我猜你应该在输入数组中循环。

【解决方案7】：

如果您想继续使用类级别选择器，那么您可以这样做（使用 Mahn 的相同 jfiddle）

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

这将仅选择具有 fetch_results 类的 div 中的文本输入框。

与任何 jQuery 一样，这只是一种方法。问 10 个 jQuery 人这个问题，你会得到 12 个答案。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

对于一些想要重置表单的人也可以在任何表单中使用type="reset"。

<form action="/action_page.php">
Email: <input type="text" name="email"><br>
Pin: <input type="text" name="pin" maxlength="4"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>

【讨论】：

【解决方案10】：

这是 Beena 在 ES6 中的回答，没有 JQuery 依赖项。谢谢 Beena！

let resetFormObject = (elementID)=> {
        document.getElementById(elementID).getElementsByTagName('input').forEach((input)=>{
            switch(input.type) {
                case 'password':
                case 'text':
                case 'textarea':
                case 'file':
                case 'select-one':
                case 'select-multiple':
                case 'date':
                case 'number':
                case 'tel':
                case 'email':
                    input.value = '';
                    break;
                case 'checkbox':
                case 'radio':
                    input.checked = false;
                    break;
            }
        }); 
    }

【讨论】：