【前端】jQuery获取radio、checkbox选中值

作者：邹峰立，微博：zrunker，邮箱：zrunker@yahoo.com，微信公众号：书客创作，个人平台：www.ibooker.cc。

本文选自书客创作平台第28篇文章。阅读原文 。

书客创作

在做页面开发的过程中，可能经常会用到jQuery获取radio（单选框）、checkbox（复选框）选中值，对于现今浏览器的多样化，IE，chrome、Firefox等。很多时候网上说的方案并不能适应所有浏览器。

这里给大家介绍一种可以适应大多数主流浏览器的方法。

首先要引入jQuery：

<script type="text/javascript" src="js/jquery.js"></script>

一、获取radio选中值：

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

二、判断checkbox是否选中：

/*value = true/false，true选中。id为checkbox的id值*/
var value = $("#id").is(":checked");

三、获取checkbox选中值：

if($("#id").is(":checked")){
    var value = $("#id").val();
}

四、修改checkbox选中状态：

$("#id").checked = true;

五、修改checkbox未选中：

$("#id").checked = false;

六、批量处理checkbox

假设页面上有一组checkbox，实现全选、取消全选以及获取选中checkbox的值。

<input id="cb" type="checkbox" value="张三">
<input id="cb" type="checkbox" value="李四">
<input id="cb" type="checkbox" value="王五">
<input id="cb" type="checkbox" value="赵六">

1. 实现checkbox全选/取消全选

var isCheckAll = false;// 标记是否全选
function swapCheck() {
    if (isCheckAll) {
        $("input[type='checkbox']").each(function() {
            this.checked = false;
        });
        isCheckAll = false;
    } else {
        $("input[type='checkbox']").each(function() {
            this.checked = true;
        });
        isCheckAll = true;
    }
};

2. 获取checkbox选中值

var values = new Array();
function setAids() {
    <%--清空数组--%>
    values.splice(0, values.length);
    $("input[type='checkbox'][id='cb']").each(function() {
        if ($(this).is(":checked")) {
            <%--向数组内添加新元素--%>
            values.push($(this).val());
        }
    });
};

阅读原文

---

微信公众号：书客创作