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学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JavaScript中的闭包
2016/02/24 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
Python中的元类编程入门指引
2015/04/15 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
基于python实现计算两组数据P值
2020/07/10 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
2019年.net常见面试问题
2012/02/12 面试题
如何保障Web服务器安全
2014/05/05 面试题
Java程序员面试题
2013/07/15 面试题
电信专业应届生自荐信
2013/09/28 职场文书
大专学生求职信
2014/07/04 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL
Golang 对es的操作实例
2022/04/20 Golang
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers