快捷導(dǎo)航

jQuery實現(xiàn)列表的全選功能

更新時間：2015年03月18日 11:20:47 投稿：hebedich

本文給大家分享的是使用jquery實現(xiàn)的全選刪除插件的代碼，非常的實用，本文示例是結(jié)合的ThinkPHP,小伙伴們可以自由擴展。

只需要幾行代碼就可以實現(xiàn)列表的全選功能，并且可以配合post請求執(zhí)行后臺的刪除程序

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 后臺接收參數(shù)ids 格式如： 1,2,3

        var url = "Home/Role/delall'";

        $('#deleteAll').delselect('selectone',url,function(data){

            DelAlert(data);

        },function(){

            layer.msg("沒有選中內(nèi)容",2,0);

        });

    })

jquery.selectall.js

復(fù)制代碼代碼如下:

(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 );