jquery选中radio
使用 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 属性。

选中 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 开始。

使用 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 按钮。






