如何使用jQuery清除特定div中的所有输入字段? [英] How to clear all input fields in a specific div with jQuery?

问题描述

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

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.

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

First, here's my onclick and onload triggers:

<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输入元素:

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

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

  }

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

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

推荐答案

提琴手: http://jsfiddle.net/simple/BdQvp/

您可以这样做:

我在Fiddle中添加了两个按钮，以说明如何通过按钮在这些输入字段中插入或清除值.您只需捕获 onClick 事件并调用该函数即可.

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 onClick event and call the function.

//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对此的很好回答以及更通用的方法.

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

这篇关于如何使用jQuery清除特定div中的所有输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！