当前位置:首页 > jquery

jquery 单选

2026-04-07 22:40:58jquery

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);

获取单选按钮组的所有值

遍历单选按钮组获取所有选项的值:

jquery 单选

$('input[name="radioGroup"]').each(function() {
    console.log($(this).val());
});

注意事项

  • 确保同一组的单选按钮具有相同的name属性。
  • 使用.prop()而非.attr()操作checkeddisabled属性。
  • 动态生成的单选按钮需使用事件委托绑定事件:
$(document).on('change', 'input[name="radioGroup"]', function() {
    // 事件处理逻辑
});

这些方法覆盖了单选按钮的常见操作场景,可根据实际需求组合使用。

标签: 单选jquery
分享给朋友:

相关文章

jquery 表单

jquery 表单

jQuery 表单操作 使用 jQuery 操作表单可以简化 DOM 操作,提高开发效率。以下是一些常见的表单操作方法: 获取表单元素的值 使用 val() 方法可以获取或设置表单元素的值。 //…

jquery 字符串

jquery 字符串

jQuery 字符串操作 jQuery 提供了多种方法来处理字符串,尽管原生 JavaScript 已经具备强大的字符串处理能力,但结合 jQuery 可以更方便地操作 DOM 元素中的字符串内容。…

jquery 节点

jquery 节点

jQuery 节点操作 jQuery 提供了丰富的 DOM 节点操作方法,可以轻松实现节点的增删改查。 查找节点 使用选择器查找节点是最常见的操作。jQuery 支持 CSS 选择器语法,可以快速定…

jquery遍历

jquery遍历

jQuery遍历方法 jQuery提供了多种遍历DOM元素的方法,可以根据需求选择合适的方式操作元素集合。 each()方法 each()方法用于遍历jQuery对象中的每个元素,并对每个元素执行回…

在jquery

在jquery

使用 jQuery 的基本方法 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常见的使用方法。 选择元素 使用…

jquery日期

jquery日期

jQuery 日期处理 jQuery本身不直接提供日期处理功能,但可以结合JavaScript的Date对象或第三方库(如moment.js)来实现日期操作。以下是常见日期处理的实现方法: 获取当前…