jQuery实现全选,反选,全不选
龙行web前端-11-1319880评论
全选和全不选以及反选
$(function() {
//全选事件
$("#checkedAll").click(function() {
$(".checkedOne").attr("checked",this.checked);
});
$("#reSelect").click(function() {
$(".checkedOne").each(function() {
this.checked = !this.checked;
});
});
});
全选编号姓名年龄
1张三122李四223王五134马六145伍六七176梅花十三17
123
/*批量选中*/
$("#CheckAll").bind('click',function () {
$("input[name='checkdel']").prop("checked",this.checked);
});
全选和取消全选
管理员列表
全选管理员ID姓名操作
小弟11Tester修改 删除小弟22Manager修改 删除小弟33Analyst修改 删除小弟44Admin修改 删除
删除选定
//查找thead下第一个th下的input
var chbAll=document.querySelector(
"thead th:first-child>input"
);
//查找tbody中所有第一个td下的input
var chbs=document.querySelectorAll(
"tbody td:first-child>input"
);
//为chbAll绑定单击事件
chbAll.οnclick=function(){
//遍历chbs中每个chb
for(var i=0;i
//设置当前chb的checked等于this的checked
chbs[i].checked=this.checked;
}
}
//为chbs中每chb都绑定单击事件
for(var i=0;i
chbs[i].οnclick=function(){
if(!this.checked)
chbAll.checked=false;
else{
//选择tbody下第一个td中的未选中的input
var unchecked=
document.querySelector(
"tbody td:first-child>input:not(:checked)"
);
if(unchecked===null)
chbAll.checked=true;
}
}
}
评论一下
赞助站长
赞助站长X
版权申明：此文如未标注转载均为本站原创，自由转载请表明出处《龙行博客》。
本文网址：/84.html
