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

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

 <html>
 <head>
 <script src="./libs/js/jquery.min.js"></script>
 <script>
 $(document).ready(
     function(){
         alert("c");
         }
 );
  function check(){
     alert("检查选项");
     $("input").css("background-color","blue");
  $("input[name='one']:checked").css("background-color","red");
  }
  var c="Hello";
  function msg(){
      document.write(c);
      }
  function checkAll(){
         $("input:checkbox").each(function(){
                 this.checked=true;
             });
      }
  function Uncheck(){
         $("input:checkbox").each(
             function(){
                 this.checked=false;

             });
      }
 </script>
 </head>
 <body>
 <form name='thef' action='./99.php' method='post' >
 <input type='checkbox' name='one[]' value="ni">first<br/>
 <input type='checkbox' name='one[]' value="wo">second<br/>
 <input type='checkbox' name='one[]' value="ta">third<br/>
 <input type='text' name='four'>four<br/>
 <p onclick="checkAll()">全选</p>
 <p onclick="Uncheck()">取消全选</p>

 <p onclick="check()">检查选择项 </p>
 <input type='submit' value='提交'>
 </form>
 </body>
 </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实现全选的更多相关文章

  1. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  2. 转发！HTML 复选框 checkbox 的 JavaScript 的全选和全反选

    checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: <html> <head> <meta http-equiv= ...

  3. JQuery的复选框选中、取消、全选，全不选问题

    一.必须引入JQuery库: 下面是js代码: /*** * 服务管理块>>>复选框事件处理 */ //服务管理复选框被选中.取消$(function(){ $("#Ser ...

  4. jquery如何判断checkbox（复选框）是否被选中 全选 反选

    好长时间没用jq, 之前用的都是ng. 想着随便参考一下,结果被坑.因为这篇文章是09年的,也和当时jq的版本号有关,但是为什么在百度排名第一,百度果然坑人,以后还是google 给出坑人文章的链接 ...

  5. js之全选即点击全选标签可选择全部复选框

    目标效果:网页全选功能,即点击全选标签可选择全部复选框 实现代码如下 <!DOCTYPE html> <html lang="en"> <head&g ...

  6. 复选框（checkbox）、多选框

    1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

  7. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  8. 当鼠标点击input框时，想让全选input框的所有内容只需要加“onfocus="this.select();”就可以了

    当鼠标点击input框时,想让全选input框的所有内容只需要加“onfocus="this.select();”就可以了

  9. 第十六篇 JS实现全选操作

    JS实现全选   嗨,同学们好,老师这里是专门教同学解决一些针对性的问题,所以说综合起来,就要靠同学自己了. 这节课我们学一个很实用的东西,全选操作!比如淘宝这种商城对吧,我的购物车,我要全选购买,或 ...

随机推荐

  1. ios富文本的简单使用 AttributedString

    富文本,顾名思义就是丰富的文本格式,本文demo使用NSMutableAttributedString //获取富文本 NSMutableAttributedString*attributeStrin ...

  2. call和apply的异同

    共同点: 作用:调用一个对象的一个方法,以另一个对象替换当前对象.将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 Global 对 ...

  3. MySQL之数据类型（常用）

    MySQL-data_type数据类型 1.查看数据类型 mysql> help data type    //通过help对数据进行查看,以及使用的方法 2.MySQL常见的数据类型 整数in ...

  4. File类遍历目录及文件

    1. 构造函数 File(String args0)//使用一个表示文件或目录的路径的字符串创建一个File对象 File(URL args0)//使用一个URL对象创建File对象 File(Fil ...

  5. 时间同步方法及几个可用的NTP服务器地址

    大家都知道计算机电脑的时间是由一块电池供电保持的,而且准确度比较差经常出现走时不准的时候.通过互联网络上发布的一些公用网络时间服务器NTP server,就可以实现自动.定期的同步本机标准时间. 依靠 ...

  6. tr069开源协议EasyCwmp移植

    1.平台MT7628 2.交叉编译器及版本信息mipsel-linux + buildroot-gcc463_32bits.tar.bz2 3.创建工作目录lancer@ubuntu:~$ mkdir ...

  7. 【从无到有】JavaScript新手教程——2.分支结构和循环

    介绍完JS的简介和向量以及运算符,大家对JS也有了初步的了解和认识,今天带大家来看一下JS中常用的分支结构以及循环结构是怎么使用的 [JS中的分支结构] 一.[if-else结构] 1.结构写法: i ...

  8. Linux密码保护

    在之前写了Linux密码破解的方法,虽然这样对于忘记密码时很方便,但同时别人也可以很轻易的破解你的Liunx虚拟机,安全问题存在隐患. 下面给出一些Liunx密码的安全防护操作: 1.防止破解root ...

  9. 腾讯云无法绑定公网IP问题解释与解决方案。

    http://blog.csdn.net/chenggong2dm/article/details/51475222 解释:公网IP并不直接配置在服务器上,而是在服务器外部的路由上,通过某种映射连接. ...

  10. .net应用程序中添加chm帮助文档打开显示此程序无法显示网页问题

    在做.net大作业时添加了chm帮助文档结果在打开时显示“此程序无法显示网页问题”,但是把帮助文档拷到别的路径下却显示正常, 经过从网上查找,终于找到了答案: (1).chm文件的路径中不能含有“#” ...