<html>
<head>
<meta charset="utf-8">
<title>Checkbox的练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
table{width:100%;text-align:center;}
</style> <script src="jquery.js"></script>
<script language="javascript">
$(function(){
//给全选的复选框添加事件
$("#all").click(function(){
// this 全选的复选框
var userids=this.checked;
//获取name=box的复选框 遍历输出复选框
$("input[name=box]").each(function(){
this.checked=userids;
});
}); //给name=box的复选框绑定单击事件
$("input[name=box]").click(function(){
//获取选中复选框长度
var length=$("input[name=box]:checked").length;
//未选中的长度
var len=$("input[name=box]").length;
if(length==len){
$("#all").get(0).checked=true;
}else{
$("#all").get(0).checked=false;
}
});
}); </script>
</head>
<body>
<div>
<form action="" method="post">
<table border="1px">
<tr>
<th>
<input type="Checkbox" id="all"/>全选
</th>
<th>用户编号</th>
<th>用户账号</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>用户年龄</th>
<th>家庭住址</th>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10010"/></td>
<td>10010</td>
<td>root</td>
<td>小别</td>
<td>男</td>
<td>22</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10011"/></td>
<td>10011</td>
<td>root</td>
<td>小李</td>
<td>男</td>
<td>23</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10012"/></td>
<td>10012</td>
<td>root</td>
<td>小赵</td>
<td>男</td>
<td>21</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10013" /></td>
<td>10013</td>
<td>root</td>
<td>小周</td>
<td>男</td>
<td>25</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" value="10014" /></td>
<td>10014</td>
<td>root</td>
<td>小吴</td>
<td>男</td>
<td>20</td>
<td>河南</td>
</tr>
</table> </form>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox的练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
table{width:100%;text-align:center;} </style>
<script language="javascript">
function checkAll(obj){
//alert(obj.checked);
//获取name=box的复选框
var userids=document.getElementsByName("box");
//alert(userids.length);
for(var i=0;i<userids.length;i++){
userids[i].checked=obj.checked;
}
} function selectAll(){
//获取name=box的复选框
var userids=document.getElementsByName("box");
var count=0;
//遍历所有的复选框
for(var i=0;i<userids.length;i++){
if(userids[i].checked){
count++;
}
}
//选中复选框的个数==获取复选框的个数
if(count==userids.length){
//设置id为all复选框选中
document.getElementById("all").checked=true;
}else{
//设置id为all复选框不选中
document.getElementById("all").checked=false;
} }
</script>
</head>
<body>
<div>
<form action="" method="post">
<table border="1px">
<tr>
<th>
<input type="Checkbox" onclick="checkAll(this)" id="all"/>全选
</th>
<th>用户编号</th>
<th>用户账号</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>用户年龄</th>
<th>家庭住址</th>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10010"/></td>
<td>10010</td>
<td>root</td>
<td>小别</td>
<td>男</td>
<td>22</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10011"/></td>
<td>10011</td>
<td>root</td>
<td>小李</td>
<td>男</td>
<td>23</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10012"/></td>
<td>10012</td>
<td>root</td>
<td>小赵</td>
<td>男</td>
<td>21</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10013" /></td>
<td>10013</td>
<td>root</td>
<td>小周</td>
<td>男</td>
<td>25</td>
<td>河南</td>
</tr>
<tr>
<td><input type="Checkbox" name="box" onclick="selectAll()" value="10014" /></td>
<td>10014</td>
<td>root</td>
<td>小吴</td>
<td>男</td>
<td>20</td>
<td>河南</td>
</tr>
</table> </form>
</div>
</body>
</html>
