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。