jQuery关于全选按钮的实现

最近写了全选按钮的js实现：

js中的toggle函数可以轻松使点击按钮时候切换状态：

$("#select-all").toggle(function() {

$("#specTable .selects").attr("checked", true);

}, function() {

$("#specTable .selects").attr("checked", false);

});

但是查看源码发现jQuery阻止了点击事件的默认行为，event.preventDefault（），导致全选按钮本身点击不可行，网上有很多解决办法，于是为按钮都绑定click事件得以解决：

$("#select-all").bind('click',function(){//全选按钮

var temp = $(this).attr("checked");

if(typeof temp == 'undefined'){

$("#specTable .selects").removeAttr("checked");

}else if(temp == 'checked'){

$("#specTable .selects").attr("checked", true);

}

});

$("#specTable .selects").bind('click',function(){//每一表格行，jQuery中的隐式迭代：jQuery中的方法都设计成自动操作对象集合，而不是单独的对象，因此可全部添加点击事件

var obj = $("#specTable .selects");

var total = obj.length;

var selectCount = $("#specTable .selects").filter(function(index, element) {

return element.checked;

}).length;

if(total == selectCount)

{

$("#select-all").attr("checked", true);

}

else

{

$("#select-all").attr("checked", false);

}

});

全选功能即实现！

ps:在使用js中的clone函数，一般我们可以获取页面的模板，作为全局变量，随用随clone。