jquery实现全选、反选、取消全部等操作(复选框checkbox)
<!DOCTYPE html><html><head><meta charset="gbk"><title>复选框的使用</title><style type="text/css"></style><script src="jquery-1.5.1.js"></script>&l
·
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>复选框的使用</title>
<style type="text/css">
</style>
<script src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//全选框添加点击事件
$("#checkAllChange").click(function(){
//全选框选择状态
var checkedFlag = this.checked;
//选择class="userid"的控件，并执行循环
$(".userid").each(function(){
//将当前控件的选择状态设置跟全选框的状态一样
this.checked=checkedFlag;
});
});
//权限按钮添加点击事件
$("#checkAll").click(function(){
//将全选框的checked属性设置为true，也就是选中全选框
$("#checkAllChange").attr("checked",true);
//选择class="userid"的控件，让全部都选中
$(".userid").each(function(){
this.checked=true;
});
});
//取消全部按钮添加点击事件
$("#removeAll").click(function(){
//将全选框的checked属性设置为false，也就是不选中全选框
$("#checkAllChange").attr("checked",false);
//选择class="userid"的控件，设置全部都不选中
$(".userid").each(function(){
this.checked=false;
});
});
//反选按钮添加点击事件
$("#reverse").click(function(){
//选择class="userid"的控件
$(".userid").each(function(){
//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。
if(this.checked==true){
this.checked=false;
}else{
this.checked=true;
}
//this.checked = !this.checked;//这行是更为简洁的写法
});
//处理全选按钮
dealAllCheck();
});
//批量删除按钮添加点击事件
$("#batchDel").click(function(){
$(".userid").each(function(i){
if(this.checked==true){
/*$(this) 的到的input
$(this).parent()是父节点td
$(this).parent().parent()是祖父节点tr
然后remove 祖父节点TR即可
*/
$(this).parent().parent().remove();
}
});
});
//给每一个class="userid"的控件添加一个点击事件
$(".userid").click(function(){
dealAllCheck();
})
function dealAllCheck(){
var allCheckedFlag = true;//默认为选中
$(".userid").each(function(){
if(!this.checked){//一旦有一个未选中，则全选按钮 设置不选中
allCheckedFlag = false;
}
})
$("#checkAllChange").attr("checked",allCheckedFlag);
}
})
</script>
</head>
<body>
<table border="1">
<tr>
<td><input type="checkbox" id="checkAllChange" /></td>
<td>用户id</td>
<td>用户名</td>
<td>电话</td>
<td>地址</td>
</tr>
<tr>
<td><input type="checkbox" class="userid" value="1" /></td>
<td>1</td>
<td>张三</td>
<td>13970040940</td>
<td>北京</td>
</tr>
<tr>
<td><input type="checkbox" class="userid" value="2" /></td>
<td>2</td>
<td>李四</td>
<td>18809876543</td>
<td>上海</td>
</tr>
<tr>
<td><input type="checkbox" class="userid" value="3" /></td>
<td>3</td>
<td>王五</td>
<td>13767857733</td>
<td>河南</td>
</tr>
<tr>
<td><input type="checkbox" class="userid" value="4" /></td>
<td>4</td>
<td>旺财</td>
<td>13398768546</td>
<td>江西</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="checkAll" value="全选" /></td>
<td><input type="button" id="removeAll" value="取消全部" /></td>
<td><input type="button" id="reverse" value="反选" /></td>
</tr>
<tr>
<td colspan="4" align="center"><input type="button" value="批量删除" id="batchDel"></td>
</tr>
</table>
</body>
</html>代码中有比较详细的注释，欢迎点赞！
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)