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 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Vue header组件开发详解
Jan 26 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
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倒计时出现-0情况的解决方法
2016/07/28 PHP
php简单截取字符串代码示例
2016/10/19 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
Python sorted函数详解(高级篇)
2018/09/18 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
《再别康桥》教学反思
2014/02/12 职场文书
个人租房协议书
2014/04/09 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
中国梦口号
2014/06/13 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
党支部承诺书
2015/01/20 职场文书
酒店前台岗位职责
2015/04/16 职场文书
迎新年主持词
2015/07/06 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
mysql查看表结构的三种方法总结
2022/07/07 MySQL
Spring Boot实现文件上传下载
2022/08/14 Java/Android