<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var $checkbox=$("input:checkbox");
//全选按钮
$("#quanxuan").click(function(){
$($checkbox).prop("checked",true);
});
//取消按钮
$("#quxiao").click(function(){
$($checkbox).prop("checked",false);
});
//反选按钮
$("#fanxuan").click(function(){
for(var i=0;i<$checkbox.length;i++){
$checkbox[i].checked =! $checkbox[i].checked;
}
});
//删除按钮
$("#del").click(function(){
for(var i=0;i<$checkbox.length;i++){
if($checkbox[i].checked){
var trs_obj=$checkbox[i].parentNode.parentNode;
$(trs_obj).remove();
}
}
});
});
</script>
</head>
<body>
<table border="1" width="500">
<tr>
<td>序号</td>
<td>商品</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr>
<td>1001</td>
<td>小米5s</td>
<td>已发货</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>1002</td>
<td>小米5s</td>
<td>已发货</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>1002</td>
<td>小米5s</td>
<td>已发货</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td colspan="4">
<input type="button" id="quanxuan" value="全选" />
<input type="button" id="quxiao" value="取消" />
<input type="button" id="fanxuan" value="反选" />
<input type="button" id="del" value="删除" />
</td>
</tr>
</table>
</body>
</html>
