<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
</head>
<body>
<table border="1" align="center">
<tr>
<th>状态</th>
<th>用户名</th>
</tr>
<tr>
<td><input id="z" type="checkbox"/></td>
<td>赵</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>钱</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>孙</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>周</td>
</tr>
<tr>
<td><input type="button" value="全选中"/></td>
<td><input type="button" value="全取消"/></td>
<td><input type="button" value="全反选"/></td>
</tr>
</table>
<script type="text/javascript">
$("input[type=button]:eq(0)").click(function(){
$("input[type=checkbox]").attr("checked",true);
$(this).attr("disabled","true");
$("input[type=button]:eq(1)").removeAttr("disabled");
});
$("input[type=button]:eq(1)").click(function(){
$("input[type=checkbox]").attr("checked", false);
$(this).attr("disabled","disabled");
$("input[type=button]:eq(0)").removeAttr("disabled");
});
$("input[type=button]:eq(2)").click(function(){
$(":checkbox").each(function(index,domEle){
$(domEle).attr("checked",!($(domEle).prop("checked")));//遍历每个checkbox组件,把checked属性设置成相反值,注意这里如果使用attr的话取得的是undefined。
});
});
</script>
</body>
</html>
jQuery实现全选,全部选,反选
最新推荐文章于 2022-08-30 08:53:24 发布