jQuery单选按钮取值问题：未选中时返回空值而非undefined

当然有啦！这是个很常见的小需求，用jQuery可以非常简便地解决，给你几种实用的方法：

方法一：逻辑或运算符（最简洁） #

利用JavaScript的逻辑或特性——当左侧值为undefined、null等假值时，会自动取右侧的默认值。直接一行代码搞定：

// 替换成你的单选按钮name属性值
var selectedVal = $('input[name="yourRadioGroupName"]:checked').val() || '';

原理：如果没有选中任何单选按钮，:checked选择器匹配不到元素，.val()会返回undefined，此时|| ''会把它转换成空字符串；如果有选中项，就正常返回对应的值。

方法二：判断匹配元素长度（更直观） #

先获取选中的单选按钮元素，通过判断元素的长度来决定返回值，可读性更强：

var $checkedRadio = $('input[name="yourRadioGroupName"]:checked');
var selectedVal = $checkedRadio.length > 0 ? $checkedRadio.val() : '';

原理：如果有选中项，$checkedRadio.length会大于0，就取它的value；否则返回空字符串。

方法三：结合.is()方法判断 #

用.is(':checked')直接判断是否有选中的单选按钮，逻辑清晰：

var $radioGroup = $('input[name="yourRadioGroupName"]');
var selectedVal = $radioGroup.is(':checked') ? $radioGroup.filter(':checked').val() : '';

示例代码结合你的场景 #

假设你的HTML是这样的：

<div>
  <input type="radio" name="fruit" value="apple">苹果
  <input type="radio" name="fruit" value="banana">香蕉
  <input type="radio" name="fruit" value="orange">橙子
</div>
<button id="getValBtn">获取选中值</button>

对应的jQuery代码可以这么写：

$('#getValBtn').click(function() {
  var selectedFruit = $('input[name="fruit"]:checked').val() || '';
  console.log(selectedFruit); // 未选中时输出空字符串，选中时输出对应水果值
});

这样就能完美解决未选中时返回undefined的问题啦！

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