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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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和XSS跨站攻击的防范
2007/04/17 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
php 常用的系统函数
2017/02/07 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
js post提交调用方法
2014/02/12 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
Python解析树及树的遍历
2016/02/03 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python正则表达式实例代码
2020/03/03 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python中wx模块的具体使用方法
2020/05/15 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
2015年度企业工作总结
2015/05/21 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
简单介绍Python的第三方库yaml
2021/06/18 Python
Python3.10的一些新特性原理分析
2021/09/15 Python