使用jQuery获取选中的单选框的值

技术背景

在前端开发中，经常会遇到需要获取表单中单选框选中值的需求。jQuery是一个功能强大的JavaScript库，它提供了简洁的语法和丰富的选择器，使得处理这类问题变得更加容易。

实现步骤

1. 基本选择器获取选中值

可以使用 :checked 选择器结合元素名称来获取选中的单选框的值。例如，要获取表单 myForm 中 name 为 radioName 的选中单选框的值，可以使用以下代码：

$('input[name=radioName]:checked', '#myForm').val()

2. 监听单选框变化事件

可以通过监听 change 事件来实时获取选中的单选框的值。示例代码如下：

$('#myForm input').on('change', function() {
  alert($('input[name=radioName]:checked', '#myForm').val());
});

3. 已有单选框组引用时的处理

如果已经有一个单选框组的引用，可以使用 filter() 函数来获取选中的值。例如：

var myRadio = $("input[name=myRadio]");
var checkedValue = myRadio.filter(":checked").val();

4. 通过容器元素查找选中值

如果已经有一个容器元素的引用，但没有单选框的引用，可以使用 find() 函数。例如：

var form = $("#mainForm");
var checkedValue = form.find("input[name=myRadio]:checked").val();

5. 获取多个单选框组的值

如果表单中有多个单选框组，可以分别获取每个组选中的值。示例代码如下：

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

核心代码

基本获取选中值

$('input[name=radioName]:checked', '#myForm').val()

监听变化事件

$('#myForm input').on('change', function() {
  alert($('input[name=radioName]:checked', '#myForm').val());
});

使用 filter() 函数

var myRadio = $("input[name=myRadio]");
var checkedValue = myRadio.filter(":checked").val();

使用 find() 函数

var form = $("#mainForm");
var checkedValue = form.find("input[name=myRadio]:checked").val();

最佳实践

• 使用类名：为单选框添加类名，这样可以更方便地选择和样式设置。例如：

$('.radio1:checked').val();

• 检查是否有选中项：在获取选中值之前，最好检查是否有选中项，避免出现 null 值。示例代码如下：

var radioanswer = 'none';
if ($('input[name=myRadio]:checked').val() != null) {
  radioanswer = $('input[name=myRadio]:checked').val();
}

常见问题

• 选择器引号问题：在使用选择器时，要注意引号的使用，确保选择器语法正确。例如，$("input[name='radioName']:checked") 是正确的用法。
• 多个单选框组混淆：如果表单中有多个单选框组，要确保选择器中的 name 属性正确，避免获取到错误的值。