简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

jQuery实现列表的全选功能

来源:易贤网   阅读:890 次  日期:2015-03-19 15:01:55

温馨提示:易贤网小编为您整理了“jQuery实现列表的全选功能”,方便广大网友查阅!

本文给大家分享的是使用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 );

以上所述就是本文的全部内容了,希望大家能够喜欢。

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:JavaScript判断一个字符串是否包含指定子字符串的方法
下一篇:jQuery实现根据类型自动显示和隐藏表单
易贤网手机网站地址:jQuery实现列表的全选功能
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!