当前位置:首页 > jquery

jquery选中radio

2026-04-08 04:03:19jquery

使用 jQuery 选中 radio 按钮

通过 jQuery 选中 radio 按钮可以使用多种方法,具体取决于需求和场景。以下是几种常见的方法:

通过属性选择器选中特定值的 radio 按钮

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

name 属性指定 radio 组的名称,value 属性指定具体的 radio 按钮值。prop('checked', true) 将选中匹配的 radio 按钮。

通过 ID 选中特定的 radio 按钮

$('#radioId').prop('checked', true);

如果 radio 按钮有唯一的 ID,可以直接通过 ID 选择器选中并设置 checked 属性。

jquery选中radio

选中 radio 组中的第一个或最后一个按钮

$('input[name="radioName"]:first').prop('checked', true);
$('input[name="radioName"]:last').prop('checked', true);

使用 :first:last 选择器可以选中 radio 组中的第一个或最后一个按钮。

通过索引选中 radio 组中的特定按钮

$('input[name="radioName"]').eq(index).prop('checked', true);

eq(index) 方法可以选中 radio 组中指定索引的按钮,索引从 0 开始。

jquery选中radio

使用 attr 方法(旧版 jQuery)

$('input[name="radioName"][value="radioValue"]').attr('checked', 'checked');

在旧版 jQuery 中,可以使用 attr 方法设置 checked 属性,但推荐使用 prop 方法。

示例代码

以下是一个完整的示例,展示如何通过按钮点击选中特定的 radio 按钮:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<button id="selectMale">Select Male</button>
<button id="selectFemale">Select Female</button>

<script>
$(document).ready(function() {
    $('#selectMale').click(function() {
        $('input[name="gender"][value="male"]').prop('checked', true);
    });
    $('#selectFemale').click(function() {
        $('input[name="gender"][value="female"]').prop('checked', true);
    });
});
</script>

注意事项

  • 使用 prop 方法而不是 attr 方法,因为 prop 更适用于布尔属性(如 checked)。
  • 确保 radio 按钮的 name 属性一致,以实现单选功能。
  • 如果动态添加 radio 按钮,可能需要使用事件委托或重新绑定事件。

通过以上方法,可以灵活地使用 jQuery 选中 radio 按钮。

标签: jqueryradio
分享给朋友:

相关文章

jquery文档

jquery文档

以下是关于 jQuery 文档的核心内容和资源整理,便于快速查阅和使用: jQuery 官方文档 官网地址:jQuery Official Documentation 内容分类:API 参考:包含所…

jquery实现

jquery实现

以下是关于jQuery实现的常见应用场景及方法,分为核心功能模块说明: DOM操作 使用$()选择器获取元素后,可通过链式调用方法操作DOM: $('#element').html('新内容').…

jquery 加载

jquery 加载

jQuery 加载方法 使用jQuery需要先将其库文件加载到网页中。以下是几种常见的加载方式: 通过CDN加载 推荐使用官方或公共CDN(内容分发网络)加载jQuery,速度快且可能被浏览器缓存:…

jquery表单

jquery表单

jQuery 表单操作 jQuery 提供了丰富的 API 用于表单操作,包括表单元素的选择、值获取与设置、事件处理等。 表单元素选择 使用 jQuery 选择器可以方便地选取表单元素: // 选…

jquery 删除

jquery 删除

jQuery 删除元素的方法 使用 jQuery 删除 DOM 元素可以通过多种方式实现,具体方法取决于需求。以下是几种常见的删除方式: remove() 方法 remove() 方法会删除选中的元…

jquery 选择器

jquery 选择器

jQuery 选择器基础语法 jQuery 选择器基于 CSS 选择器语法扩展,用于快速定位 DOM 元素。基本结构为 $("selector") 或 jQuery("selector"),返回一个包…