首先定义表单中checkbox的name为一个数组range[]
1
|
<input type="checkbox" name="range[]" value="你设定的值" />
|
示例:
1
|
<input type="checkbox" name="range[]" value="<?php echo $row['id'];?>"/>
|
下面是“全选”、“反选”、“删除”。
1
2
3
4
5
|
<input type="button" value="全选" id="selectAll">
<input type="button" value="反选" id="unSelect">
<input type="submit" value="删除" onclick="return queren()" />
|
JS代码如下:
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
|
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload=function(){
var selectAll = $("selectAll"),
unSelect = $("unSelect"),
inputs=document.getElementsByName('range[]'),
len = inputs.length;
selectAll.onclick=function(){
for(var i=0; i<len;i++){
inputs[i].checked=true;
}
}
unSelect.onclick=function(){
for(var i=0; i<len;i++){
var o = inputs[i];
o.checked?o.checked=false:o.checked=true;
}
}
}
</script>
<script type="text/javascript">
function queren(){
var info=confirm('确认删除么?');
if(info==true){
return true;
}
return false;
}
</script>
|
JS代码如下:
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
|
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload=function(){
var pan;
var conf;
var selectAll = $("selectAll"),
unSelect = $("unSelect"),
del = $("del"),
inputs=document.getElementsByName('range[]'),
len = inputs.length;
selectAll.onclick=function(){
for(var i=0; i<len;i++){
inputs[i].checked=true;
}
}
unSelect.onclick=function(){
for(var i=0; i<len;i++){
var o = inputs[i];
o.checked?o.checked=false:o.checked=true;
}
}
$("form1").onsubmit=function(){
for(var i=0; i<len;i++){
var o = inputs[i];
if(o.checked){
pan=1;
break;
}else{
pan=0;
}
}
if(!pan){
alert("请选择");
return false;
}else{
conf=confirm("确定删除");
}
if(conf){
return true;
}else{
return false;
}
}
}
</script>
|
删除按钮:
1
|
<input type="submit" value="删除" id="del" />
|
form表单id=“form1” 并且还要调用一个jquery。
微信打赏
支付宝打赏