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" />