<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
</head>
<style type="text/css">
table {
border: 1px solid #b5b5b5;
width: 400px;
height: 300px;
text-align: center;
vertical-align: middle;
}
</style>
<!--将jquery-1.7.1.min.js文件与当前的这个html文件放入到同一个文件夹内即可-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//找到table标签下非第一行的td
$("table tr:not(:first)").find("td").each(function(){
//给td绑定单击事件
$(this).bind("click",function(){
//找到当前td的父节点，再找当前节点的第一个子节点，找到当前子节点下的复选框
$box = $(this).parent().children().eq(0).find("input[type='checkbox");
if($box.is(":checked")){
//若当前节点被选中，就移除checked属性
$box.removeAttr("checked");
}else{
//反之，设置当前复选框为选中状态
$box.attr("checked","checked");
}
});
});
//找到table标签下非第一行的复选框
$("table tr:not(:first)").find("input[type='checkbox']").each(function(){
$(this).bind("click",function(){
if($(this).is(":checked")){
$(this).removeAttr("checked");
}else{
$(this).attr("checked","checked");
}
});
});
//全选事件
$("#selectAll").click(function(){
//若当前全选复选框为选中状态，则设置所有class="select"的复选框为选中
if($("#selectAll").is(":checked")){
$(".select").attr("checked","checked");
}else{
//若当前全选复选框为非选中状态，则移除所有class="select"的复选框属性checked
$(".select").removeAttr("checked");
}
});
});
</script>
</head>
<body>
<label>测试步骤：</label><br>
<label>点击复选框，即可看到效果</label><br/><br/>
<table border='1'cellspacing="0" cellpadding="0">
<tr><td><input type="checkbox" id="selectAll"/></td><td>序号</td><td>名称</td></tr>
<tr><td><input type="checkbox" class="select" /></td><td>1</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>2</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>3</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>4</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>5</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>6</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>7</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>8</td><td>test1</td></tr>
<tr><td><input type="checkbox" class="select"/></td><td>9</td><td>test1</td></tr>
</table>
</body>
04-17
1484
1484
09-07
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
