js jquery radio 选中选中值

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_33701251

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ooo0/p/8619692.html

本文介绍如何使用原生JavaScript和jQuery操作HTML中的Radio按钮，包括获取数量、读取选中值及设置选中状态。

radio示例:

<label><input type="radio" name="type" id="type" value="year" />年</label>
<label><input type="radio" name="type" id="type" value="month" checked/>月</label>
<label><input type="radio" name="type" id="type" value="date" />日</label><br />

js操作

// 获取dom
var arrObj = document.getElementsByName("type");

一,获取

// 获取radio数量
console.log(arrObj.length);
// 获取选中radio的值
for(var i = 0; i < arrObj.length; i++) {
    if(arrObj[i].checked) {
        console.log(arrObj[i].value);
    }
}

二,选中

for(var i = 0; i < arrObj.length; i++) {
    // 选中某个value的选项
    if(arrObj[i].value == "year") {
        arrObj[i].checked = true;
    }
    // 选中第三个
    if(i == 2){
        //arrObj[i].checked = true;
        arrObj[i].checked = "checked";
    }
}

jQuery操作

一,获取

// 获取radio数量
console.log($("input:radio[name='type']").length);
// 获取选中radio的值
console.log($("input:radio[name='type']:checked").val());

二,选中

// 选中某个value的选项
$("input:radio[name='type'][value=year]").prop("checked", "checked");
// 选中第几个选项
$("input:radio[name='type']").eq(2).prop("checked", "checked");
// 选中第一个,选中最后一个
$("input:radio[name='type']:first").prop("checked", "checked");
$("input:radio[name='type']:last").prop("checked", "checked");

// extra:获取radio节点
// 1.伪元素
$("input:radio");
// 2.type
$("input[type='radio']");

// extra:选中方式
// 1.click
$("input:radio[name='type'][value=year]").click();
// 2.prop
$("input:radio[name='type'][value=year]").prop("checked", "checked"); // 推荐
$("input:radio[name='type'][value=year]").prop("checked", true);