jQuery實現(xiàn)列表的全選功能
來源:易賢網 閱讀:1200 次 日期:2015-03-19 15:01:55
溫馨提示:易賢網小編為您整理了“jQuery實現(xiàn)列表的全選功能”,方便廣大網友查閱!

本文給大家分享的是使用jquery實現(xiàn)的全選刪除插件的代碼,非常的實用,本文示例是結合的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("沒有選中內容",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 );

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

更多信息請查看IT技術專欄

更多信息請查看腳本欄目
易賢網手機網站地址:jQuery實現(xiàn)列表的全選功能
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點

版權所有:易賢網