为什么jQuery获取单选按钮值返回“ON”？该如何进行修正？

问题根因 #

value属性的放置位置错误，你把该写在单选框输入元素上的value属性，全部写到了对应的<label>标签上。浏览器针对没有显式设置value的type="radio"输入框，默认返回的值就是on，这就是你每次拿到的结果都是on的原因。

修复方案 #

把所有value属性从<label>标签迁移到对应的<input type="radio">标签上即可，修正后的单选项示例如下：

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="searchByProject" name="searchBy" class="custom-control-input" checked="checked" value="Project">
  <label class="custom-control-label" for="searchByProject" pointer>by Project</label>
</div>

其余三个单选框同理，给每个<input>加上对应的value="Invoice"、value="Started"、value="Ended"属性即可。

你原本使用的jQuery取值代码逻辑没有问题，HTML修改完成后就可以正常获取选中单选框的自定义值。

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