首頁 > web前端 > js教程 > jQuery實作清單的全選功能_jquery

jQuery實作清單的全選功能_jquery

WBOY
發布: 2016-05-16 16:08:41
原創
1563 人瀏覽過

只需要幾行程式碼就可以實現清單的全選功能,並且可以配合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

複製程式碼 程式碼如下:

(函數( $ ){
    $.fn.selectall = 函數(className) {
        $(this).bind('點選',function()
        {
            if($(this).attr('已檢查') == '檢查')
            {
                $(this).attr("已選取",false)
                $('.' className).attr('已檢查',false);
            }其他{
                $(this).attr('已檢查','已檢查');
                $('.' className).attr('已檢查','已檢查');
            }
        });
        $('.' className).bind('click',function()
        {
            if($(this).attr('已檢查') == '檢查')
            {
                $(this).attr("已選取",false);
            }其他{
                $(this).attr('已檢查','已檢查');
            }
        });
    };
    $.fn.delselect = function(className,url,fun,unselectfun){
        $(this).bind('點選',function(){
            var selectid = '';
            $("." 類別名稱).each(function(){
                if($(this).attr('已檢查')=='已檢查'){
                    selectid =$(this).attr('check-value') ',';
                }
            });
            if(selectid)
            {
                selectid = selectid.substring(0,selectid.length-1);
                $.post(url,{ids:selectid},function(data){
                   且有樂趣(資料);
                });
            }其他
            {
                unselectfun();
            }
        });
    };
})( jQuery );

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板