jquery批量全选和反选教程
js教程
我的站长站
2023-03-13
共95人阅读
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="删除">
<table border=1>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>打两份工</td>
<td>真的很高</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>打两份工</td>
<td>真的很高</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>打两份工</td>
<td>真的很高</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>打两份工</td>
<td>真的很高</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>打两份工</td>
<td>真的很高</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>打两份工</td>
<td>真的很高</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("input[type=button]").click(function(){
$("tbody").find("input:checkbox:checked").each(function() { // 遍历选中的checkbox
n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
$("tbody").find("tr:eq("+n+")").remove();
});
});
});
$(function(){
$("thead").find("input[type=checkbox]").click(function(){
var flag = $(this).prop("checked");
$("tbody").find("input[type=checkbox]").each(function() { // 遍历选中的checkbox
$(this).prop("checked",flag);
});
});
});
</script>
</html>