jquery 单选
jQuery 单选按钮操作
使用jQuery操作单选按钮(radio buttons)可以实现动态选择、获取选中值、禁用/启用等功能。以下是常见的操作方法和示例代码:
获取选中的单选按钮值
通过:checked选择器获取当前选中的单选按钮的值:
var selectedValue = $('input[name="radioGroup"]:checked').val();
console.log(selectedValue); // 输出选中项的值
设置单选按钮选中状态
使用.prop()方法设置特定单选按钮为选中状态:
$('input[name="radioGroup"][value="option1"]').prop('checked', true);
监听单选按钮变化事件
通过.change()事件监听单选按钮的选择变化:
$('input[name="radioGroup"]').change(function() {
alert('Selected value: ' + $(this).val());
});
禁用/启用单选按钮
使用.prop()方法控制单选按钮的禁用状态:
// 禁用
$('input[name="radioGroup"]').prop('disabled', true);
// 启用
$('input[name="radioGroup"]').prop('disabled', false);
动态创建单选按钮
通过jQuery动态生成单选按钮并添加到DOM中:
var radioHtml = '<input type="radio" name="dynamicGroup" value="newOption"> New Option';
$('#container').append(radioHtml);
获取单选按钮组的所有值
遍历单选按钮组获取所有选项的值:

$('input[name="radioGroup"]').each(function() {
console.log($(this).val());
});
注意事项
- 确保同一组的单选按钮具有相同的
name属性。 - 使用
.prop()而非.attr()操作checked和disabled属性。 - 动态生成的单选按钮需使用事件委托绑定事件:
$(document).on('change', 'input[name="radioGroup"]', function() {
// 事件处理逻辑
});
这些方法覆盖了单选按钮的常见操作场景,可根据实际需求组合使用。






