使用 JQuery 和 JS 访问单选按钮值时获取 "on"

Question

我正在尝试访问单选按钮值，但我得到的只是“打开”。我试过 JQuery 和 JS，都给了我这个结果。我的输入内部有一个跨度，当我得到输入的 val() 时，它会给我“打开”。当尝试访问输入内部的跨度时，它不会显示任何内容。

我的代码：

            <ul id="sportCourtsRow" tabindex=44>
                <div id="sportCourtsRowIn" style="margin-left: 31vw; margin-top: 0.8vh;">
                    {% for c in courtsB %}
                        {% if loop.index == 1 %}
                            <li class="courtsItem" style="position: relative;">
                                <label>
                                    <input type="radio" name="sportCourts" class="sportCourts" checked="checked"><span id="courtsItem{{c}}" class="sportsCourtsTxt">{{c}}</span>
                                </label>
                            </li>

                        {% else %}
                            <li class="courtsItem" style="position: relative;">
                                <label>
                                    <input type="radio" name="sportCourts" class="sportCourts"><span id="courtsItem{{c}}" class="sportsCourtsTxt">{{c}}</span>
                                </label>
                            </li>
                        {% endif %}
                    {% endfor %}
                </div>
            </ul>

           <script>
            window.onload = function() {
            var courts = $('input[name="sportCourts"]').each(function(){
                document.getElementById("monthTxt").innerHTML += $(this).val();//test if working
            });
            });
           </script>



  #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;
  }

Answer 1

您的单选按钮的值是正确的。使用

$(this).siblings()[0].innerText;

而不是

$(this).val();

Answer 2

原来我忘记给输入添加值了。这样就解决了。 Lajos Arpad 指出了另一种有效的解决方案。感谢大家的帮助！

使用 JQuery 和 JS 访问单选按钮值时获取 "on"

Getting "on" when accessing radio buttons values with JQuery and JS

html

javascript

css

jquery

twig