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

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

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 3

受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 4

改变这个：

 <div class=fetch_results>

对此：

 <div id="fetch_results">

然后以下内容应该有效：

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

http://jsfiddle.net/NVqeR/

Answer 5

我看到的情侣问题。 fetch_results是一个类，而不是Id，每个函数看起来都不对。

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

请务必记住，如果您最终使用无线电或检查按钮，则必须清除已检查的属性，而不是值。

Answer 6

如果你想留在班级选择器那么你可以做这样的事情（使用Mahn的同一个jfiddle）

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

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

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

Answer 7

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

Answer 8

当定位可以获取所有内容时，只需删除div中的所有输入并使用输入前面的冒号即可。

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

Answer 9

对于某些想要重置表单的人，也可以在任何表单内使用Ex: if (TryValidateModel(modelVM)) { ... }。

type="reset"

Answer 10

这里是在没有JQuery依赖的情况下，ES6中的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;
            }
        }); 
    }

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

10 个答案: