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

How to clear all input fields in a specific div with jQuery?

提问by rixter

I am trying to use jQuery to do a simple thing: clear the input fields of a group of input field within a div whenever the form loads, or if the user changes a picklist; but I'm having a devil of a time getting the selector to work.

我正在尝试使用 jQuery 做一件简单的事情：每当表单加载时，或者用户更改选项列表时，清除 div 中一组输入字段的输入字段；但我有一段时间让选择器工作。

First, here's my onclick and onload triggers:

首先，这是我的 onclick 和 onload 触发器：

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

and on the picklists:

并在选项列表上：

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

Next, here's my HTML input elements in the div I want to clear:

接下来，这是我要清除的 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>

Finally, here's my script:

最后，这是我的脚本：

 function clear_fetch() {    

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

  }

However, nothing happens...so, I must not have the selector correct. Does anybody see what I've done wrong?

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

回答by Peter

Fiddle:http://jsfiddle.net/simple/BdQvp/

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

You can do it like so:

你可以这样做：

I have added two buttons in the Fiddle to illustrate how you can insert or clear values in those input fields through buttons. You just capture the onClickevent and call the function.

我在 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.');
}

Update:

更新：

Check out this great answer below by Beenaas well for a more universal approach.

查看Beena下面的这个很棒的答案以及更通用的方法。

回答by Beena Shetty

This function is used to clear all the elements in the form including radio button, check-box, select, multiple select, password, text, textarea, file.

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

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

回答by Mahn

Change this:

改变这个：

 <div class=fetch_results>

To this:

对此：

 <div id="fetch_results">

Then the following should work:

那么以下应该工作：

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

http://jsfiddle.net/NVqeR/

http://jsfiddle.net/NVqeR/

回答by Remi Morin

inspired from https://stackoverflow.com/a/10892768/2087666but I use the selector instead of a class and prefer if over switch:

灵感来自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('');
      }
   });
}

this should take care of almost all input inside any selector.

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

回答by kmfk

Couple issues that I see. fetch_resultsis a class, not an Id and the each function doesn't look right.

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

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

Just be sure to remember that if you end up with radios or check buttons, you will have to clear the checked attribute, not the value.

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

回答by BrianM

If you wanted to stay with a class level selector then you could do something like this (using the same jfiddle from Mahn)

如果您想继续使用类级别选择器，那么您可以执行以下操作（使用 Mahn 的相同 jfiddle）

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

This will select only the text input boxes within the div with a fetch_results class.

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

As with any jQuery this is just one way to do it. Ask 10 jQuery people this question and you will get 12 answers.

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

回答by Yumiko

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

回答by Tanner_Gram

Just had to delete all inputs within a div & using the colon in front of the input when targeting gets most everything.

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

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

回答by ????

For some who wants to reset the form can also use type="reset"inside any form.

对于一些想要重置表格的人也可以使用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>