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 去除数组的重复元素
May 04 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
javascript每日必学之循环
Feb 19 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 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
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php并发加锁示例
2016/10/17 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
javascript中"/"运算符常见错误
2010/10/13 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python定时器使用示例分享
2014/02/16 Python
Python进程间通信用法实例
2015/06/04 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
python中return不返回值的问题解析
2020/07/22 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
物理学专业求职信
2014/07/04 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
总结Python变量的相关知识
2021/06/28 Python
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js