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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
function, new function, new Function之间的区别
Mar 08 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
JS字符串截取函数实例
Dec 27 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
JS实现纸牌发牌动画
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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
javascript引导程序
2008/10/26 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
python中pygame模块用法实例
2014/10/09 Python
Python操作串口的方法
2015/06/17 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python GUI模拟实现计算器
2020/06/22 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
校园安全检查制度
2014/02/03 职场文书
保险内勤岗位职责
2014/04/05 职场文书
责任心演讲稿
2014/05/14 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
会计求职简历自我评价
2015/03/10 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js