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

字號:


    本文給大家分享的是使用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
    代碼如下:
    (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 );
    以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。