您的位置：首页 > Web前端 > JQuery

jQuery、html、JavaScript实现全选、反选、批量删除

2018-01-26 20:57 666 查看
方式一：重点内容
<input type="button" onclick="delAll()" value="批量删除" />
<input type="button" onclick="che()" value="全选/反选" />
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" onclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
<script>

//全选
function cheAll(){
var cek = $("#che")[0].checked;
var ck = $("input[name='ck']");
for(var i = 0; i < ck.length; i++){
ck[i].checked = cek;
}
}

//反选
function che(){
var cks = document.getElementsByName("ck");
for(var i = 0; i < cks.length; i++) {
cks[i].checked = !cks[i].checked;
}
}

//批量删除
function delAll(){
var ck = $("input:checked[name='ck']");
if(ck.length == 0){
alert("请选择,然后进行删除");
return;
}
var f=confirm("确认删除!!");
if(!f){
return;
}
for(var i = 0; i < ck.length; i++){
ck[i].parentNode.parentNode.remove();
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
方式二：
<script type="text/javascript">
//全选的功能
function allcheck(){
//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
c.checked=true;//true代表选中
}
}

//全不选
function allnotcheck(){
//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
c.checked=false;//false代表不选
}
}
//反选
function backcheck(){//先得到所有的checkbox
var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
var c=ck[i];//得到一个checkbox
if(c.checked==true){//如果当前的checkbox是选中的则不让其选中
ck[i].checked=false;
}else{
ck[i].checked=true;
}
}
}

//批量删除
function alldel(){
var f=false;
//得到要删除的主键id
var arr=[];//用于存要删除的选中的id值

var ck=document.getElementsByName("ck");//得到一组checkbox  相当于数组
//循环这一组checkbox让每一个checkbox选中
for(var i=0;i<ck.length;i++){
if(ck[i].checked==true){//代表选中
arr.push(ck[i].value);
f=true;
}
}

//alert(arr);
//跳到删除的servlet里去
if(f==true){
if(confirm("您确认要删除吗？"))
location.href="servlet/DelServlet?ids="+arr;
}else{
alert("请至少选中一条进行批量删除");
}
}
</script>

</head>

<body>
<center>
<input type="radio" id="allcheck" name="allcheck" onclick="allcheck();"/>全选  
<input type="radio" id="allnotcheck" name="allcheck"  onclick="allnotcheck();"/>全不选  
<input type="radio" id="backcheck" name="allcheck"  onclick="backcheck();"/>反选  
<a href="javascript:void(0);" onclick="alldel();">批量删除</a>
<br/>
<table border="1">
<tr>
<td></td>
<td>序号 </td>
<td>姓名</td>
<td>邮箱 </td>
<td>密码 </td>
</tr>
<c:forEach var="u" items="${list}">
<tr>
<td>
<input type="checkbox" name="ck" value="${u.id}"/>
</td>
<td>${u.id } </td>
<td>${u.name }</td>
<td>${u.email } </td>
<td>${u.pwd } </td>
</tr>
</c:forEach>

</table>

</center>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航