forecho

把生命浪费在美好的事物上

实现checkbox全选和PHP删除多个数据

2011年11月24日

首先定义表单中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。