title: Getting "on" when accessing radio buttons values with JQuery and JS
body: <p>I'm trying to access radio buttons values but all I get is &quot;on&quot;.
  I've tried JQuery and JS and both give me this result.
  My inputs has a span inside of it, When I get the val() of the input it gives me &quot;on&quot;.
  When trying to access the span inside of the input it wont show anything.</p>
  <p>My code:</p>
  <pre><code>            &lt;ul id=&quot;sportCourtsRow&quot; tabindex=44&gt;
                  &lt;div id=&quot;sportCourtsRowIn&quot; style=&quot;margin-left: 31vw; margin-top: 0.8vh;&quot;&gt;
                      {% for c in courtsB %}
                          {% if loop.index == 1 %}
                              &lt;li class=&quot;courtsItem&quot; style=&quot;position: relative;&quot;&gt;
                                  &lt;label&gt;
                                      &lt;input type=&quot;radio&quot; name=&quot;sportCourts&quot; class=&quot;sportCourts&quot; checked=&quot;checked&quot;&gt;&lt;span id=&quot;courtsItem{{c}}&quot; class=&quot;sportsCourtsTxt&quot;&gt;{{c}}&lt;/span&gt;
                                  &lt;/label&gt;
                              &lt;/li&gt;
  
                          {% else %}
                              &lt;li class=&quot;courtsItem&quot; style=&quot;position: relative;&quot;&gt;
                                  &lt;label&gt;
                                      &lt;input type=&quot;radio&quot; name=&quot;sportCourts&quot; class=&quot;sportCourts&quot;&gt;&lt;span id=&quot;courtsItem{{c}}&quot; class=&quot;sportsCourtsTxt&quot;&gt;{{c}}&lt;/span&gt;
                                  &lt;/label&gt;
                              &lt;/li&gt;
                          {% endif %}
                      {% endfor %}
                  &lt;/div&gt;
              &lt;/ul&gt;
  
             &lt;script&gt;
              window.onload = function() {
              var courts = $('input[name=&quot;sportCourts&quot;]').each(function(){
                  document.getElementById(&quot;monthTxt&quot;).innerHTML += $(this).val();//test if working
              });
              });
             &lt;/script&gt;
  
  
  
    #sportCourtsRow
    {
      position: fixed;
      margin-top: 28vh;
      height: 6vh;
      width: 70%;
      margin-left: 15vw;
      background: transparent;
      overflow-y: hidden;
      overflow-x: scroll;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      text-indent: -5vw;
    }
  
  
    #sportCourtsRow::-webkit-scrollbar 
    {
      display: none;
    }
    .sportsCourtsTxt
    {
      font-family: 'alef';
      font-size: 2.75vh;
      font-weight: 700;
      margin-top: 1vh;
      margin-right: 100vw;
      text-align: center;
    }
  </code></pre>