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评估用户输入密码的强度实现代码
Nov 30 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
js生成随机数的过程解析
Nov 24 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
详解React中setState回调函数
Jun 14 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
PHP中如何定义和使用常量
2013/02/28 PHP
php之Memcache学习笔记
2013/06/17 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
用jscript实现新建word文档
2007/06/15 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python @property及getter setter原理详解
2020/03/31 Python
优秀员工个人的自我评价
2013/11/29 职场文书
七一建党日演讲稿
2014/09/05 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript