JS实现checkbox全选功能

　　在后台系统开发中，往往需要涉及对信息的批量操作，例如全选的checkbox；如图：

　　

　　选中一级页面前面的checkbox就会全选，JS实现如下：

html代码：

<input id="ckAll" type="checkbox" name="chkA"/>一级页面 
<input name="chkChild" type="checkbox" id="13"/>人物

JS代码：

$(function () {
    //全选
    $("input[name=chkA]").click(function () {
        $("input[name=chkChild]").attr("checked", $(this).attr("checked")); //选中全部信息
        var flag = $(this).attr("checked");
        $("input[name=chkA]").each(function () {//选择上下全选框
            $(this).attr("checked", flag);
        });
    });

    //选中信息
    $("input[name=chkChild]").click(function () {
        if (!$(this).attr("checked")) {//当前记录未选中，全选不选中
            $("input[name=chkA]").each(function () {
                $(this).attr("checked", false);
            });
        }
        else//当前记录选中
        {
            var flag = true;
            var $inputs = $("input[name=chkChild]");
            for (var i = 0; i < $inputs.length; i++) {
                if (!$($inputs[i]).attr("checked")) {
                    flag = false;
                    break;
                }
            }
            $("input[name=chkA]").each(function () {
                $(this).attr("checked", flag);
            });
        }
    });
})

然后通过ajax将选中的信息传递给一般处理程序，更改数据库；

////批量操作
function changeChecked(strUser, fstCgID) {
    var times = $("#hdclicks").val();
    $("#hdclicks").val(times + 1);
    times = $("#hdclicks").val();
    if (times > 1)//解决操作过程中重复操作
    {
        alert("正在处理，请稍后操作");
        return false;
    }
    var msg = "确定要批量操作吗？";
    var alertmsg = "请选择要操作的信息！";
    var $inputs = $("input[name=chkChild]");
    var keyId = "";
    for (var i = 0; i < $inputs.length; i++) {
        if ($($inputs[i]).attr("checked")) {
            keyId = keyId + $($inputs[i]).attr("id") + ",";
        }
    }
    if (keyId.length > 0) {
        if (confirm(msg)) {
            keyId = keyId.substr(0, keyId.length - 1);

            $.ajax({
                type: 'Post',
                url: 'UserControl/CategoryOperate.ashx',
                data: {
                    action: 'changeUpdTypeMult',
                    CgID: keyId,
                    User: strUser,
                    UpdType: $("#selectUpdType>option:selected").get(0).value
                },
                success: function (res) {
                    if (res != "1") {
                        alert("操作失败，请重试。");
                        window.location.href = "TasksTree.aspx?fstCGID=" + fstCgID;
                    }
                    else {
                        window.location.href = "TasksTree.aspx?fstCGID=" + fstCgID;
                    }
                },
                error: function () {
                    alert("操作请求发送失败，请重试！");
                }
            });
        }
        else {
            $("#hdclicks").val(times - 1);
            return false;
        }
    }
    else {
        alert(alertmsg);
    }
}

注意在html页面中增加：

<input type="hidden" id="hdclicks" value="0" />