码迷,mamicode.com
首页 > Web开发 > 详细

php处理表单中的复选框问题以及js实现全选

时间:2016-02-06 14:17:05      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

 做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就把调试好的代码发上来供大家参考使用。

   首先要记得引用jquery框架,这样写起代码来相对容易点,尤其突出在选择器上。

 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接收页面的处理方式:

<?php
$ch = $_POST[‘one‘];
$c = $_POST[‘four‘];
foreach($ch as $b)
{
    echo $b."<br/>";
}
//var_dump($ch)."<br />";
//var_dump($c);
?>

这样就可以完成全选和取消全选的功能,当然,可以把二者合二为一,就出现我们经常用的效果了

php处理表单中的复选框问题以及js实现全选

标签:

原文地址:http://www.cnblogs.com/zh666888/p/5183945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!