2016-04-22 10 views
1

input[type="file"]フィールドを多く含むことができる動的ページがあります。ファイルが選択されると、すべての入力のラベルを変更する必要があります。複数の入力のラベルテキストを変更する

ので、各入力のため、場合:

  • 空:テキスト= "アップロード";
  • ファイルが選択されました:text =ファイル名。ここで

HTMLのサンプルです:

<label for="upload-qm1"> 
    <span class="button">upload</span> 
    <input id="upload-qm1" type="file" accept=".pdf, .doc"> 
</label> 

私はこのコードを使用して、単一inputのためにこれを行う方法を知っている:

$('label[for="upload-qm1"] span').text($(this).val()); 

しかし、私は方法がわかりません多くのinputフィールドは私のページにあります。私はこのようなものを試しました:

$(this).parent('label').find('span').text($(this).val()); 

残念ながらそれは動作しません。すべてinputフィールドを変更する方法をどのように得ることができるかについての助け?

答えて

4

変更されたinputに関連するspanを見つけるために、DOMトラバーサルを使用できます。あなたはイストcorretをしようとしたコードのほとんど

$('input:file').change(function() { 
    $(this).prev('span').text($(this).val()); 
}) 

Working example

0

:これを試してみてください。 問題は、parent()関数のパラメータを設定していることです。

このような何か試してください:あなたはラベル$(this)をクリックした場合 $(this).parent('label').find('span').text($(this).val());

また$(this)は、ラベル自体の入力フィールドではないことを確認して、 はラベルです。

0

$('input[type="file"]').on('change', function() { 
 
     id = $(this).attr('id'); 
 
      console.log("change event") 
 
     var file = $('#'+id).val().split('\\').pop(); 
 
     if(file!='') { 
 
      $('label[for="'+id+'"] span').text(file) 
 
     } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="upload-qm1"> 
 
    <span class="button">upload</span> 
 
    <input id="upload-qm1" type="file" accept=".pdf, .doc"> 
 
</label>

関連する問題