jQuery CheckBox全选

jQuery全选与反选实现

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/suzh/archive/2011/03/25/1995195.html

文章标签：

#javascript #ViewUI

本文介绍如何使用jQuery实现复选框的全选、全不选及反选功能，并展示了如何获取已选中的项。

$(function(){
	$('#inputChkAll').click(function(){
		$("input[name='chkJob']").attr("checked", $(this).attr("checked"));//注意此处
	});
});

代码如上，#inputChkAll用来全选或者全不选的CheckBox控件，其控制了name='chkJob'这个复选组。根据inputChkAll的勾选状态$(this).attr("checked")来这是chkJob的勾选状态

// 全选
            $("#btnCheckAll").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", true);
            });

            // 全不选
            $("#btnCheckNone").bind("click", function () {
                $("[name = chkItem]:checkbox").attr("checked", false);
            });

            // 反选
            $("#btnCheckReverse").bind("click", function () {
                $("[name = chkItem]:checkbox").each(function () {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });

            // 得到选中
            $("#btnSubmit").bind("click", function () {
                var result = new Array();
                $("[name = chkItem]:checkbox").each(function () {
                    if ($(this).is(":checked")) {
                        result.push($(this).attr("value"));
                    }
                });

alert(result.join(","));
});

转载于:https://www.cnblogs.com/suzh/archive/2011/03/25/1995195.html