jQuery實現列表的全選功能，jquery列表全選

jQuery實現列表的全選功能，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 );

以上所述就是本文的全部內容了，希望大家能夠喜歡。