php处理表单中的复选框问题以及js实现全选
2016-02-06 11:07
856 查看
做的一个项目中遇到了全选和取消全选的问题,这是一个很普遍的功能,,虽然我们经常用到,但是真正做起来却发现行不通,在网上找了些,大部分都是ie,但是谷歌内核浏览器不能正常实现,所以经过小小的调整,今天就把调试好的代码发上来供大家参考使用。
首先要记得引用jquery框架,这样写起代码来相对容易点,尤其突出在选择器上。
在表单 里面切记name一栏要有“[]",否则多个复选框同时提交,php只取最后一个。加上后就自然变成数组的样式了。
js中,function里面的this指代的是DOM对象,所以调用的方法在dom中才能查到,并不是jquery框架中的,这一点要清楚。网上有使用
这种方法来实现全选,经测试在ie中没问题,但是在谷歌浏览器出现问题,可以选中,但是取消全选时,表面上取消了,但是实际源码中并没有取消,所以在不刷新页面时,再次全选会发现无法选中的情况。
下面是php接收页面的处理方式:
这样就可以完成全选和取消全选的功能,当然,可以把二者合二为一,就出现我们经常用的效果了
首先要记得引用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); ?>
这样就可以完成全选和取消全选的功能,当然,可以把二者合二为一,就出现我们经常用的效果了
相关文章推荐
- phpstorm使用技巧
- 关于php的魔术常量
- ThinkPHP使用经验积累
- PHP设计模式之适配器模式
- PHP 中的防御性编程
- 今天把PHP复习了一下.
- php判断ip是否在指定ip区间内
- Yaf安装及配置
- PHP web 安全
- MySQL管理工具---phpAdmin
- PHP和Mysql简单的交互
- WORDPRESS教程之WORDPRESS第十二课WP-SETTING.PHP文件详解
- phpstorm 配置 babel 支持EcmaScript6
- TP-Link 路由器快速安装指南
- 【PHP】基于ThinkPHP框架搭建OAuth2.0服务
- phpStorm 新建文件SVN不提交的解决的方法
- Win7安装SMTP服务的方法
- PHP加密解密
- PHP面向对象深入研究之【组合模式与装饰模式】
- PHP---异常处理