当前位置:首页 > 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 加载方法 使用 CDN 加载 jQuery 推荐通过公共 CDN(如 Google、Microsoft 或 jQuery 官方)加载,速度快且可能已被浏览器缓存。 <…

jquery 样式

jquery 样式

jQuery 样式操作 jQuery 提供了多种方法来操作 HTML 元素的样式,包括直接修改 CSS 属性、添加或移除类、获取样式值等。 修改 CSS 属性 使用 css() 方法可以直接修改元素…

jquery 框架

jquery 框架

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其设计宗旨是“Write Less, Do More”,通…

jquery地址

jquery地址

jQuery 官方地址 jQuery 的官方网站和 CDN 地址如下: 官网:https://jquery.com/ CDN 链接(通过 jQuery 官网提供): <scr…

jquery清空

jquery清空

使用 jQuery 清空元素内容的方法 清空 HTML 元素内容 使用 .empty() 方法可以移除选定元素的所有子节点(包括文本和子元素)。 $("#elementId").empty();…

jquery获取标签

jquery获取标签

jQuery获取标签的方法 jQuery提供了多种选择器和方法来获取HTML标签元素,以下是一些常见的方式: 通过标签名选择元素 使用标签名直接选择元素,例如选择所有<div>标签:…