title: Change label text for multiple inputs
body: <p>I have a dynamic page that can have a lot of <code>input[type="file"]</code> fields. I need to change the label of every input once a file is selected.</p>
  
  <p>So, for each input, if:</p>
  
  <ul>
  <li>Empty: text = "upload";</li>
  <li>File selected: text = name of file.</li>
  </ul>
  
  <p>Here is a sample of HTML:</p>
  
  <pre><code>&lt;label for="upload-qm1"&gt;
      &lt;span class="button"&gt;upload&lt;/span&gt;
      &lt;input id="upload-qm1" type="file" accept=".pdf, .doc"&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>I know how to do this for a single <code>input</code>, using this code:</p>
  
  <pre><code>$('label[for="upload-qm1"] span').text($(this).val());
  </code></pre>
  
  <p>However, I don't know how many <code>input</code> fields I will have on my page. I tried something like this:</p>
  
  <pre><code>$(this).parent('label').find('span').text($(this).val());
  </code></pre>
  
  <p>but unfortunately it doesn't work. Any help on how I can get a method for changing all <code>input</code> fields?</p>