jQuery实现全选框选中时选中所有复选框,取消其中一个就会取消全选框,全部选中则选中全选所在的复选框
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现全选框选中时选中所有复选框,取消其中一个就会取消全选框,全部选中则选中全选所在的复选框相关的知识，希望对你有一定的参考价值。
使用jQuery实现全选框选中时选中所有复选框,
- 取消选中全选框时,所有的复选框取消选中状态
- 取消其中一个就会取消全选框,
- 全部选中则选中全选所在的复选框
代码实现:
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--部署jQuery-->
<script src="js/jquery.1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//全选,或取消全选;
$("#checkAll").click(function () {
//获取当前复选框的选中状态;
var flag=$("#checkAll").prop("checked");
//修改其余所有的复选框的选中状态;
$('input[name="checkOne"]').prop("checked",flag);
});
//当取消其中一个复选框,全选框也随之改变;当全选中时,全选框选中;
//这里除了全选框之外的复选框统一name;
$('input[name="checkOne"]').click(function () {
//得到下面复选框的总数;
var l1= $('input[name="checkOne"]').length;
//得到选中复选框的总数;
var l2= $('input[name="checkOne"]:checked').length;
//将比较结果赋值给全选框的checked属性;
$('#checkAll').prop("checked",l1==l2);
});
});
</script>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>姓名</td>
<td>
全选:<input type="checkbox" id="checkAll" />
</td>
</tr>
<tr>
<td>张三</td>
<td>
<input type="checkbox"name="checkOne" />
</td>
</tr>
<tr>
<td>李四</td>
<td>
<input type="checkbox" name="checkOne" />
</td>
</tr>
<tr>
<td>马克</td>
<td>
<input type="checkbox" name="checkOne" />
</td>
</tr>
<tr>
<td>123</td>
<td>
<input type="checkbox"name="checkOne" />
</td>
</tr>
</table>
</body>
</html>
效果:
以上是关于jQuery实现全选框选中时选中所有复选框,取消其中一个就会取消全选框,全部选中则选中全选所在的复选框的主要内容，如果未能解决你的问题，请参考以下文章