当前位置:首页 > jquery

jquery 单选

2026-03-02 13:37:32jquery

jQuery 单选按钮操作

jQuery 提供多种方法操作单选按钮(radio buttons),包括获取选中值、设置选中状态以及事件监听。

获取选中的单选按钮值

使用 :checked 选择器获取当前选中的单选按钮值:

var selectedValue = $("input[name='radioGroup']:checked").val();

若需要检查是否有选项被选中:

jquery 单选

if ($("input[name='radioGroup']:checked").length > 0) {
    console.log("有选项被选中");
}

设置单选按钮选中状态

通过 prop() 方法设置特定值为选中状态:

$("input[name='radioGroup'][value='value1']").prop("checked", true);

监听单选按钮变化事件

使用 change 事件监听选中状态变化:

jquery 单选

$("input[name='radioGroup']").change(function() {
    console.log("选中的值: " + $(this).val());
});

禁用/启用单选按钮

通过 prop() 控制禁用状态:

// 禁用
$("input[name='radioGroup']").prop("disabled", true);
// 启用
$("input[name='radioGroup']").prop("disabled", false);

动态生成单选按钮

结合 HTML 字符串和 jQuery 动态添加单选按钮:

$("#container").append('<input type="radio" name="dynamicGroup" value="dyn1"> Option 1');

注意事项

  • 确保所有同组单选按钮的 name 属性相同。
  • 使用 prop() 而非 attr() 处理布尔属性(如 checkeddisabled)。

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

相关文章

jquery 之家

jquery 之家

jQuery 之家相关资源 jQuery 之家是一个提供 jQuery 插件、教程和代码示例的中文资源网站。以下是关于 jQuery 之家的一些有用信息: 网站内容 提供丰富的 jQuery…

jquery.js

jquery.js

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互等操作。以下是关于 jQuery.js 的核心信息和使用方法: 获取 j…

jquery 插入html

jquery 插入html

jQuery 插入 HTML 的方法 jQuery 提供了多种方法来动态插入 HTML 内容到 DOM 中。以下是几种常用的方法: append() 将内容插入到选定元素的内部末尾。 $(…

jquery 获取

jquery 获取

jQuery 获取元素的方法 jQuery 提供了多种方法来获取 DOM 元素,以下是常用的几种方式: 通过 ID 获取元素 使用 $("#id") 可以获取指定 ID 的元素。例如: $("#m…

jquery添加

jquery添加

jQuery 添加元素的方法 在jQuery中,添加元素到DOM有多种方式,可以根据需求选择合适的方法。 append() 将内容插入到选定元素的内部末尾处。 $("#container").ap…

jquery方法

jquery方法

jQuery 核心方法 $() 或 jQuery() 是核心选择器方法,用于获取 DOM 元素或创建 jQuery 对象。支持 CSS 选择器、DOM 元素或 HTML 字符串。 $('#id'…