做的一个项目中遇到了全选和取消全选的问题，这是一个很普遍的功能，，虽然我们经常用到，但是真正做起来却发现行不通，在网上找了些，大部分都是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. MYSQL表记录字段换行符回车符处理

    ), ), '');  CHAR(10): 换行符 CHAR(13): 回车符

  2. Android系统--输入系统（五）输入系统框架

    Android系统--输入系统(五)输入系统框架 1. Android设备使用场景: 假设一个Android平板,APP功能.系统功能(开机关机.调节音量).外接设备功能(键盘.触摸屏.USB外接键盘 ...

  3. linux下如何查看mysql、apache是否安装,并卸载

    --linux下如何查看mysql.apache是否安装,并卸载? http://blog.163.com/dengxiuhua126@126/blog/static/1186077720137311 ...

  4. 关于/var/run/docker.sock

    译者按: 这篇博客介绍了什么是/var/run/docker.sock,以及如何使用/var/run/docker.sock与Docker守护进程通信,并且提供了两个简单的示例.理解这些,我们就可以运 ...

  5. this web application instance has been stopped already.

    this web application instance has been stopped already. Could not load oracle/sql/converter_xcharset ...

  6. App内切换语言

    前几天客户提需求,对App增加一个功能,这个功能目前市面上已经很常见,那就是应用内切换语言.啥意思,就是 英.中.法.德.日...语言随意切换. (本案例采用Data-Bingding模式,麻麻再也不 ...

  7. JAVA Struts2 搭建

    java  struts 2搭建 1.web工程 2.将struts2 用到的jar包,拷贝到webcontent/webinf/lib文件夹.下 3.webcontent  下的web.xml  下 ...

  8. C语言学习第四章

    今天学习C语言循环结构,为什么要用循环呢?因为有时候我们对一堆的数字进行重复的处理的时候要重复的编写一些相同或者差不多的代码,让程序显得很臃肿,而且写着也麻烦,如果用循环来写的话能简化很多,出错的话也 ...

  9. 关于Integer与int

    integer a=new integer(1); integer b=new integer(1); int c=1; integer d=1; a==b  false因为地址不同: a==c  t ...

  10. 【代码学习】PHP 正则表达式

    一.正则表达式介绍 正则表达式是用于描述字符排列和匹配模式的一种规则,主要用于字符串的匹配.查找.替换.分割等操作 ------------------------------------------ ...