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 に 2 つのボタンを追加しました。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に触発されましたが、クラスの代わりにセレクターを使用し、スイッチよりも優先します。

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 に答える
0 
$.each($('.fetch_results input'), function(idx, input){
  $(input).val('');
});
于 2016-02-28T12:23:59.177 に答える
0

クラス レベル セレクターを使用したい場合は、次のようにすることができます (Mahn の同じ jfiddle を使用)。

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

これにより、fetch_results クラスを持つ div 内のテキスト入力ボックスのみが選択されます。

他の jQuery と同様に、これは 1 つの方法にすぎません。10 人の jQuery 関係者にこの質問をすると、12 の回答が得られます。

于 2012-05-10T22:53:26.313 に答える