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

Question

我试图访问单选按钮值，但所有我得到的是"on"。我尝试过JQuery和JS，两者都给我这个结果。我的输入里面有一个跨度，当我得到输入的val()它会给我一个"on"。当试图访问输入框内的span时，它不会显示任何内容。

我代码:

<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指出，还有另一种可行的解决方案。谢谢大家的帮助!