用Jquery实现checkbox的反选、全选、全不选

当我们在用JS来实现web端操作的时候，多选框的全选、全不选和反选是最常用的功能，尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。

下面我们就来用JQuery实现checkbox多选框的全选、全不选、反选的功能：

假设有4个checkbox多选框，他们包含在一个id=“chk”的div中，而全选、全不选、反选的button按钮所在标签的id分别为btnAllChk、btnAllNotChk、btnInvert。

具体代码如下：

[html] view
plaincopy

$(function () {

//全不选

$("#btnAllNotChk").click(function () {

$("#chk input:checkbox").removeAttr("checked");

});

//全选

$("#btnAllChk").click(function () {

$("#chk input:checkbox").attr("checked", "checked");

});

//反选

$("#btnInvert").click(function () {

//1.方法一实现反选

$("#chk input:checkbox").each(function () {

this.checked = !this.checked;

})

//2.方法二实现反选

// $("#chk input:checkbox").each(function (){

// if ($(this).attr("checked")) {

// $(this).attr("checked", false);

// }

// else {

// $(this).attr("checked", "checked");

// }

// })

//3.方法三实现反选

// var $cks = $("#chk input:checkbox");

// for (var i = 0; i < $cks.length; i++) {

// $cks.get(i).checked = !$cks.get(i).checked;

// }

});

})

这样我们就实现了checkbox的全选、反选、全不选操作

注意：1.Jquery本身就是由javascript代码堆积而成的；

2.使用Jquery语句前先导入Jquery控件。

本文处处：http://blog.csdn.net/yhc0322/article/details/6786721