title: Change Input Value on Radio Change
body: <p>I have 2 product and I want to append the product name with the gender when the user selects their gender. I have almost got it working but just not quite there yet. The gender sometimes duplicates and if you change from dudes to chicks then it keeps both. I know that there is an elegant solution but I just cant find it. Any help would be much appreciated. </p>
  
  <p><a href="http://jsfiddle.net/rbh9qzwo/1/" rel="nofollow">http://jsfiddle.net/rbh9qzwo/1/</a></p>
  
  <pre><code>&lt;form&gt;
      &lt;input type="radio" name="name" value="Graphics Sock" required&gt;Graphics
      &lt;input type="radio" name="name" value="Pattern Sock" required&gt;Patterns&lt;/br&gt;
      &lt;input type="radio" name="gender" value="Dudes" required&gt;Dudes
      &lt;input type="radio" name="gender" value="Chicks" required&gt;Chicks
  &lt;/form&gt;
  
  $('input:radio[name="gender"]').each(function () {
      if ($(this).val() == 'Dudes') {
          $('input:radio[name="name"]').val($('input:radio[name="name"]').val() + 'Dudes');
      }
  
      if ($(this).val() == 'Chicks') {
          $('input:radio[name="name"]').val($('input:radio[name="name"]').val() + 'Chicks');
      }
  
  });
  </code></pre>