59

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

  }

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

4

11 回答 11

93

小提琴：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.');
}

更新：

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

于 2012-05-10T22:56:58.607 回答
88

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

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;
    }
  });
}
于 2012-06-05T06:39:16.680 回答
9

改变这个：

 <div class=fetch_results>

对此：

 <div id="fetch_results">

然后以下应该工作：

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

http://jsfiddle.net/NVqeR/

于 2012-05-10T22:45:14.370 回答
6

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

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

于 2015-02-25T21:24:46.337 回答
3

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

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

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

于 2012-05-10T22:43:30.157 回答
2

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

$('#divId').find(':input').val('');
于 2018-12-03T21:25:33.263 回答
1

这是 Beena 在 ES6 Sans 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;
            }
        }); 
    }
于 2020-12-15T04:49:06.747 回答
0

如果你想保留一个类级别的选择器，那么你可以做这样的事情（使用来自 Mahn 的相同 jfiddle）

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

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

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

于 2012-05-10T22:53:26.313 回答
0 
$.each($('.fetch_results input'), function(idx, input){
  $(input).val('');
});
于 2016-02-28T12:23:59.177 回答
0

对于一些想要重置表单的人也可以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>
于 2018-12-19T15:29:04.230 回答
0

这是一个对我有用的简单衬里

$('input','.container_class_name').val(null).trigger('change');

'input'是您要在容器中清除的元素，& 'container_class_name'是容器类或 id 名称。

This works for all input's regardless of type (checkbox, radio, text), since the pointer is looking at the <input> element itself.

于 2022-02-11T22:12:43.167 回答