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 相关文章推荐
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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分页函数
2006/07/08 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
node网页分段渲染详解
2016/09/05 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
python抓取百度首页的方法
2015/05/19 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python获取地震信息 微信实时推送
2019/06/18 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python实现微信好友的数据分析
2019/12/16 Python
华山导游词
2015/02/03 职场文书
评职称个人总结
2015/03/05 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
最美乡村教师观后感
2015/06/11 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL