做的一个项目中遇到了全选和取消全选的问题，这是一个很普遍的功能，，虽然我们经常用到，但是真正做起来却发现行不通，在网上找了些，大部分都是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. 【Tomcat源码学习】-5.请求处理

    前四章节,主要对Tomcat启动过程中,容器加载.应用加载.连接器初始化进行了相关的原理和代码流程进行了学习.接下来开始进行接受网络请求后的相关处理学习.   一.整体流程      基于上一节图示进 ...

  2. git-ftp 用git管理ftp空间

    ftp管理不能实现版本控制,而且多电脑工作时,同步很成问题. git-ftp可以完美的解决问题 下面是我的趟坑之路,本机的环境是win10,首先你的机器得装有git. git-ftp的地址https: ...

  3. ADO.NET 获取SQL SERVER数据库架构信息

    1.确定可用字段数目 sqlDataReader类提供了FieldCount属性,可确定查询反悔了多少个字段. 2.确定返回行的数目 sqlDataReader中没有指示可用行的属性. 3.确定字段的 ...

  4. 腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs

    [原文链接] ## 写在前面 curvejs 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 ...

  5. Elasticsearch - 快速入门

    Elasticsearch是基于Apache 2.0开源的实时.分布式.分析搜索引擎,相比Lucene,Elasticsearch的上手比较容易,这篇文章主要纪录Elasticsearch的基本概念和 ...

  6. Linux基础（7）

    Linux 基础(7) 一.内存的监控(free) free -m 以单位为MB的方式查看内存的使用情况(free命令读取的文件是/proc/meminfo) total:是指计算机安装的内存总量 u ...

  7. summerDao-比mybatis更强大无需映射配置的dao工具

    summerDao是summer框架中的一个数据库操作工具,项目地址:http://git.oschina.net/xiwa/summer. 怎么比mybatis更强大,怎么比beetlsql更简单, ...

  8. AIX误删除LV后如何进行现场保护和数据恢复工作

    在AIX环境下,若因维护误操作.存储mapping错误等,不小心将LV误删除,这种损失通常是巨大的.删除后的不当保护及恢复操作可能使数据无法恢复,也可能增加处理的时间与算法复杂度.如何有效保护现场,并 ...

  9. 蓝桥杯-马虎的算式-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  10. 调用startActivityForResult后，onActivityResult为什么立刻响应

    现象      今天在编写代码的时候,涉及到两个Activity通过Intent来传值的问题.具体描述为:activity A调用startActivityForResult()函数启动Activit ...