做的一个项目中遇到了全选和取消全选的问题，这是一个很普遍的功能，，虽然我们经常用到，但是真正做起来却发现行不通，在网上找了些，大部分都是ie，但是谷歌内核浏览器不能正常实现，所以经过小小的调整，今天就把调试好的代码发上来供大家参考使用。
首先要记得引用jquery框架，这样写起代码来相对容易点，尤其突出在选择器上。
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
| 1 <html>
2 <head>
3 <script src="./libs/js/jquery.min.js"></script>
4 <script>
5 $(document).ready(
6 function(){
7 alert("c");
8 }
9 );
10 11 function check(){
12 alert("检查选项");
13 $("input").css("background-color","blue");
14 $("input[name='one']:checked").css("background-color","red");
15 }
16 var c="Hello";
17 function msg(){
18 document.write(c);
19 }
20 function checkAll(){
21 $("input:checkbox").each(function(){
22 this.checked=true;
23 });
24 }
25 function Uncheck(){
26 $("input:checkbox").each(
27 function(){
28 this.checked=false;
29
30 });
31 }
32 </script>
33 </head>
34 <body>
35 <form name='thef' action='./99.php' method='post' >
36 <input type='checkbox' name='one[]' value="ni">first<br/>
37 <input type='checkbox' name='one[]' value="wo">second<br/>
38 <input type='checkbox' name='one[]' value="ta">third<br/>
39 <input type='text' name='four'>four<br/>
40 <p onclick="checkAll()">全选</p>
41 <p onclick="Uncheck()">取消全选</p>
42
43 <p onclick="check()">检查选择项 </p>
44 <input type='submit' value='提交'>
45 </form>
46 </body>
47 </html>
|
在表单 里面切记name一栏要有“[]”,否则多个复选框同时提交，php只取最后一个。加上后就自然变成数组的样式了。
js中，function里面的this指代的是DOM对象，所以调用的方法在dom中才能查到，并不是jquery框架中的，这一点要清楚。网上有使用
$(“input:checkbox”).attr(“checked”,”true”);
这种方法来实现全选，经测试在ie中没问题，但是在谷歌浏览器出现问题，可以选中，但是取消全选时，表面上取消了，但是实际源码中并没有取消，所以在不刷新页面时，再次全选会发现无法选中的情况。
下面是php接收页面的处理方式：
1
2
3
4
5
6
7
8
9
10
| <?php
$ch = $_POST['one'];
$c = $_POST['four'];
foreach($ch as $b)
{
echo $b."<br/>";
}
//var_dump($ch)."<br />";
//var_dump($c);
?>
|
这样就可以完成全选和取消全选的功能，当然，可以把二者合二为一，就出现我们经常用的效果了
