jQuery实现列表的全选功能

只需要几行代码就可以实现列表的全选功能，并且可以配合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 );

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 超轻量级的基于jquery的三级展开列表

    超轻量级的基于jquery的三级展开列表

    这几天在公司的通用管理后台,使用的左右框架结构,点击左侧,右侧展开内容,项目中经常遇到左侧二级或者三级的情况,以前都是使用dtree,但是发现dtree ,样式及结构上不好控制 , 如果是动态的数据,还要写到cs文件里面 输入字符,这样不利于维护,时间久了自己都找不清了.. 于是今天自己写了个轻量级的三级展开菜单,如果需要可以在增加一级别,一般公司的项目三级都足够了. 简介: div部分无需自己定义class 及ID,只要是如下的结构就可以了,数据可以是动态 也可以是静态的 样式自己可以控制,修

  • jQuery实现仿腾讯视频列表分页效果的方法

    jQuery实现仿腾讯视频列表分页效果的方法

    本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法.分享给大家供大家参考.具体如下: 这里使用jQuery仿腾讯视频列表分页效果,无刷新分页特效,点击分页按钮,无刷新进入下一页内容列表. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • jQuery实现自定义下拉列表

    html代码: 复制代码 代码如下: <div class="dropdownContainer">     <div class="dropdownDefault">1</div>     <span class="downArrow arrow"></span>     <ul class="dropdrown-menu">         <l

  • jquery实现点击展开列表同时隐藏其他列表

    jquery实现点击展开列表同时隐藏其他列表

    本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • jquery移动点击的项目到列表最顶端的方法

    本文实例讲述了jquery移动点击的项目到列表最顶端的方法.分享给大家供大家参考.具体实现方法如下: <ul> <li>one</li> <li>two</li> <li>three</li> </ul> 如果点击two,则two这一行会移动到列表的最上方 $("li").click(function() { $(this).parent().prepend($(this)); }); 希望

  • 加载列表时jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修改属性:$("#top_menu li:first").attr("class","select"); 触发事件:$("#top_menu li:first").click(); 如果想获取li下的 a标签,如下: $("

  • jQuery实现在列表的首行添加数据

    jQuery中可以通过append在列表的最后添加数据,也可以通过prepend在列表的最前面添加数据 方法很简单: 复制代码 代码如下: jQuery('#comment_list').prepend('<li>hello www.jb51.net</li>'); 另外附上jquery实现连续向textarea文本域添加数据的代码. <%@ page language="java" contenttype="text/html; charset

  • jQuery实现列表内容的动态载入特效

    采用Jquery实现的列表数据动态更新效果,更新的数据可以是ajax请求的数据. CSS: .main { width: 100%; margin-top: 100px; text-align: center; font-size: 12.5px; } th, td { border: 1px solid #ccc; line-height: 40px; padding-left: 5px; } .item:hover { background-color: #efefef; } .item:n

  • jQuery实现列表的全选功能

    只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序 js 复制代码 代码如下: function DelAlert(data)     {         if(data == 'error')         {             alert("错误-");         }         else if(data == 'success')         {             alert("成功-");     

  • jquery与js实现全选功能的区别

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mouseup()    mouseenter(),mouseleave()  mouseover(),mouseout()  mousemove() 二.jquery挂事件 $("p").bind("事件名称",要执行的匿名函数) $("p").unbi

  • jquery实现简单的全选和反选功能

    首先我们看个简单的实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g

  • jquery写个checkbox——类似邮箱全选功能

    以前用原生 JS 写过 checkbox--类似邮箱全选功能,点击这里.最近在学习jquery,今天抽空用jquery 写个checkbox--类似邮箱全选功能. 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> &l

  • 简单的Jquery全选功能

    记载一段最简单的全选功能Jquery代码.[code]$(function(){ $("#chkAll").click(function(){  $("input:checkbox").attr("checked",$(this).attr("checked")); });});[/code]

  • jquery实现全选功能效果的实现代码

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type=&qu

  • jQuery实现checkbox全选功能完整实例

    jQuery实现checkbox全选功能完整实例

    本文实例讲述了jQuery实现checkbox全选功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>www.jb51.net jQuery实现checkBox全选</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.

  • jquery实现全选功能

    jquery实现全选功能

    本文实例为大家分享了jquery实现全选功能的具体代码,供大家参考,具体内容如下 话不多说,直接上代码: html代码: <div class="item-box">          <div class="item-title">                <div class="titleBox">                   <span>行业</span>      

  • AngularJS 购物车全选/取消全选功能的实现方法

    AngularJS 购物车全选/取消全选功能的实现方法

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

  • Android实现ListView控件的多选和全选功能实例

    本文实例讲述了Android实现ListView控件的多选和全选功能.分享给大家供大家参考,具体如下: 主程序代码 MainActivity.Java package yy.test; import java.util.ArrayList; import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.Menu; import android.vi

随机推荐