title: Can't get select radio button on form submit
body: <p>I'm having problems getting the radio button value when the form is submitted. I thought that when the form is submitted it would get the final selection that user made but it appears it doesn't recognize which one is selected.</p>
  
  <p>On initial load: This is inside my form</p>
  
  <pre><code>&lt;div id="question1"&gt;
    &lt;label&gt; Do you shop mostly on-line or at physical stores? &lt;/label&gt;
      &lt;div class="radioButtons"&gt;
        &lt;span&gt;
         Mostly on-line stores
         &lt;input name="question1" value="on-line" type="radio"&gt;
        &lt;/span&gt;
        &lt;span&gt;
          mostly physical stores
          &lt;input name="question1" value="physical" type="radio"&gt;
        &lt;/span&gt;
        &lt;span&gt;
          About both equaly
          &lt;input name="question1" value="both" type="radio"&gt;
        &lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in my submit handler</p>
  
  <pre><code>    $(".aboutmeQuestions").on("submit", function(e){
          e.preventDefault();
          var values = {};
          var $inputs = $(".aboutmeQuestions :input").not(":submit");
  
          $inputs.each(function(){
              values[this.name] = {answer : $(this).val()};
          });
          //I thought the above would get the radio buttons but I think it got the last choice as the selected one no matter what was chosen. so I tried below because I thought that the checked attribute would change automatically.
          $("input[type='radio']").each(function(){
              console.log("this ",this);
              if($(this).attr("checked")){
                  values[this.name] = {answer : $(this).val()};
              }
  
          })
  </code></pre>
  
  <p>In my EJS:</p>
  
  <pre><code>    &lt;div id="question1"&gt;
             &lt;label&gt; &lt;%=aboutUser.question1.question%&gt; &lt;/label&gt;
             &lt;div class = "radioButtons"&gt;
                  &lt;span&gt;Mostly on-line stores &lt;input type="radio" name="&lt;%=aboutUser.question1.name%&gt;" value="on-line" &lt;% if(aboutUser.question1.answer == "on-line"){%&gt; checked  &lt;%}%&gt;&gt; &lt;/span&gt;
                  &lt;span&gt;mostly physical stores &lt;input type="radio" name="&lt;%=aboutUser.question1.name%&gt;" value="physical" &lt;% if(aboutUser.question1.answer == "physical"){%&gt; checked &lt;%}%&gt;&gt; &lt;/span&gt;
                  &lt;span&gt; About both equaly &lt;input type="radio" name="&lt;%=aboutUser.question1.name%&gt;" value="both" &lt;% if(aboutUser.question1.answer == "both"){%&gt; checked  &lt;%}%&gt; &gt;&lt;/span&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>I tested it out. After clicking on nothing and pressing the submit button I get for <code>values</code> object, <code>question5[answer]: maybe"</code> <code>question1[answer]: "both"</code> that should of been equal to nothing. It is always like that no matter what I click. I don't like that pleas help me fix it. I didn't think I have to use a change method.</p>
  
  <p>Ps I save this data to DB and the inputs should be populated with answers so when I reload the page <code>&lt;span&gt;
  About both equaly&lt;input name="question1" value="both" checked="" type="radio"&gt;
  &lt;/span&gt;</code>. it shouldn't have been checked since I didn't select anything.</p>