2025年8月24日大约 2 分钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素节点选取操作实例</title>
<style type="text/css">
*{margin:0px;padding:0px;}
table{width:500px;height:300px;margin:0px auto;margin-top:30px;border-collapse:collapse}
table td{text-align:center;}
</style>
</head>
<body>
<table border='1'>
<caption><h1>人民艺术家排行榜</h1></caption>
<tr>
<th></th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>作品</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name='ids[]'></td>
<td>1</td>
<td>宋江</td>
<td>男</td>
<td>38</td>
<td>水浒传</td>
<td><button class='del'>删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name='ids[]'></td>
<td>2</td>
<td>孙悟空</td>
<td>男</td>
<td>500</td>
<td>西游记</td>
<td><button class='del'>删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name='ids[]'></td>
<td>3</td>
<td>诸葛亮</td>
<td>男</td>
<td>49</td>
<td>三国演义</td>
<td><button class='del'>删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name='ids[]'></td>
<td>4</td>
<td>薛宝钗</td>
<td>男</td>
<td>30</td>
<td>红楼梦</td>
<td><button class='del'>删除</button></td>
</tr>
<tr>
<td><input type="checkbox" name='ids[]'></td>
<td>5</td>
<td>苍老师</td>
<td>女</td>
<td>不详</td>
<td>太多了</td>
<td><button class='del'>删除</button></td>
</tr>
<tr>
<td colspan='7'>
<button id='all'>全选</button>
<button id='noall'>全不选</button>
<button id='fall'>反选</button>
<button id='pall'>批量删除</button>
</td>
</tr>
</table>
</body>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
//全选
$('#all').click(function(){
//alert('1234');
//第一种
//$(':checkbox').attr('checked','checked');
//第二种
$(':checkbox').attr('checked',true);
});
//全不选
$('#noall').on('click',function(){
//第一种
//$(':checkbox').removeAttr('checked');
//第二种
$(':checkbox').attr('checked',false);
});
//反选
$('#fall').on('click',function(){
//遍历
$(':checkbox').each(function(){
//第一种方法
/*var ce=$(this).attr('checked');
if(ce)
{
$(this).attr('checked',false);
}
else
{
$(this).attr('checked',true);
}*/
//第二种方法
this.checked=!this.checked;
});
});
//删除
$('.del').click(function(){
//alert(1234);
//检测那个checked是否被选中
var ce=$(this).parents('tr').find(':checkbox');
//console.log(ce);//数组对象 因为可以设置多个属性
if(ce[0].checked)
{
//删除整行
$(this).parents('tr').remove();
}
});
//批量删除
$('#pall').on('click',function(){
//alert(1234);
//遍历
$(':checkbox').each(function(){
//检测是否被选中
if(this.checked)
{
//删除
$(this).parents('tr').remove();
}
});
});
</script>
</html>