使用jQuery与JS获取单选框值仅返回'on'且无法读取内部span文本如何解决

问题根源 #

• 你的<input type="radio">没有显式设置value属性，浏览器对于未定义value的单选/复选框，默认取值时就会返回on，这是浏览器的标准行为
• input是自闭合的空标签，内部不能嵌套任何子元素，你代码里的span是input的平级兄弟节点，不是input的子元素，所以尝试获取input内部的span自然拿不到内容

修复方案 #

最优方案：给单选框加value属性 #

直接在模板的input标签上添加value属性，赋值为你要获取的{{c}}即可，后续不管是直接取val()还是表单提交都能直接拿到正确值，不需要额外读取span内容：

<!-- 把你的input标签改成下面的格式，checked属性按需保留即可 -->
<input type="radio" name="sportCourts" class="sportCourts" value="{{c}}" checked="checked">

若需要读取相邻span的内容 #

如果业务场景需要拿span里的文本，通过兄弟节点查找即可，同时你原来的JS代码多了一个多余的右括号，会导致语法报错，修复后的参考代码如下：

window.onload = function() {
  var courts = $('input[name="sportCourts"]').each(function(){
    // 获取当前单选框相邻的span文本
    let spanText = $(this).next('.sportsCourtsTxt').text();
    // 加了value属性之后可以直接取val()拿到对应值
    let inputVal = $(this).val();
    document.getElementById("monthTxt").innerHTML += `值：${inputVal}，文本：${spanText}<br>`;
  });
}

内容的提问来源于stack exchange，提问作者Torpid