jQuery实现列表的全选功能


Posted in Javascript onMarch 18, 2015

只需要几行代码就可以实现列表的全选功能,并且可以配合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 );

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

Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
JS中Attr的用法详解
Oct 09 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 #Javascript
JavaScript移除数组内重复元素的方法
Mar 18 #Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 #Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 #Javascript
Java File类的常用方法总结
Mar 18 #Javascript
JavaScript中的依赖注入详解
Mar 18 #Javascript
使用js实现的简单拖拽效果
Mar 18 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
Php部分常见问题总结
2006/10/09 PHP
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
Python制作动态字符图的实例
2019/01/27 Python
python实现趣味图片字符化
2019/04/30 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Python排序函数的使用方法详解
2020/12/11 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
如何定义一个可复用的服务
2014/09/30 面试题
协议书范本
2014/04/23 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs