DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery實現列表的全選功能
jQuery實現列表的全選功能
編輯:JavaScript綜合知識     

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

   

只需要幾行代碼就可以實現列表的全選功能,並且可以配合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 );

 

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved