jQuery实现列表的全选功能

  只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序

  js

  

复制代码 代码如下:

  function DelAlert(data)

  {

  if(data == 'error')

  {

  alert("错误~");

  }

  else if(data == 'success')

  {

  alert("成功~");

  location.reload();

  }

  }

  //引入jquery,这里后台配合的是thinkphp

  $(function(){

  //每行的checkbox需要有check-value属性来存放当前行的id

  //选中全部,checkAll 为选中全部的checkbox的id selctone 为每一行checkbox的class

  $('#checkAll').selectall('selectone');

  //删除选中,deleteAll为删除全部按钮的id  selectone 为每一行checkbox的class 后台接收参数ids 格式如: 1,2,3

  var url = "Home/Role/delall'";

  $('#deleteAll').delselect('selectone',url,function(data){

  DelAlert(data);

  },function(){

  layer.msg("没有选中内容",2,0);

  });

  })

  jquery.selectall.js

  

复制代码 代码如下:

  (function( $ ){

  $.fn.selectall = function(className) {

  $(this).bind('click',function()

  {

  if($(this).attr('checked') == 'checked')

  {

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

  $('.'+className).attr('checked',false);

  }else{

  $(this).attr('checked','checked');

  $('.'+className).attr('checked','checked');

  }

  });

  $('.'+className).bind('click',function()

  {

  if($(this).attr('checked') == 'checked')

  {

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

  }else{

  $(this).attr('checked','checked');

  }

  });

  };

  $.fn.delselect = function(className,url,fun,unselectfun){

  $(this).bind('click',function(){

  var selectid = '';

  $("."+className).each(function(){

  if($(this).attr('checked')=='checked'){

  selectid+=$(this).attr('check-value')+',';

  }

  });

  if(selectid)

  {

  selectid = selectid.substring(0,selectid.length-1);

  $.post(url,{ids:selectid},function(data){

  fun(data);

  });

  }else

  {

  unselectfun();

  }

  });

  };

  })( jQuery );

  以上所述就是本文的全部内容了,希望大家能够喜欢。