做的一个项目中遇到了全选和取消全选的问题，这是一个很普遍的功能，，虽然我们经常用到，但是真正做起来却发现行不通，在网上找了些，大部分都是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. jquery转盘抽奖的研究

    先看效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  2. KVO 模式详解

    KVO:观察者模式.当指定的被观察对象属性被修改时,允许对象接收到通知的机制. p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; ...

  3. .NET插件技术-应用程序热升级

    今天说一说.NET 中的插件技术,即 应用程序热升级.在很多情况下.我们希望用户对应用程序的升级是无感知的,并且尽可能不打断用户操作的. 虽然在Web 或者 WebAPI上,由于多点的存在可以逐个停用 ...

  4. 设备offline时如何自动重置

    在linux底层 Linux/include/uapi/linux/usbdevice_fs.h中,重置_IO('U', 20)可以重置usb设备. 因此,我们可以在脚本中利用这个方法去重置USB 代 ...

  5. DbVisualizer：Oracle触发器，解决ORA-04098: 触发器 'USER.DECTUSERTEST_TRI' 无效且未通过重新验证

    我没有用orcal的管理工具,而是用的DbVisualizer 9.5.2,管理数据库. 场景:需要在oracle里面实在自增字段,在网上一搜一堆文档,然后自己就找了一段自己写如下: drop tab ...

  6. C语言学习第九章

    学习C语言的最后一节课了,原因嘛上一章的末尾说过了,其实写这篇博客的时候以后开始学习Java一个多月了,一直因为各种各样的原因没有坚持做到每天一篇学习记录,可能主要因为懒吧....也有点笨,Java的 ...

  7. 关于特殊文件权限：suid、sgid和sticky-bit

    用 ls –l 命令时,能看到三个八进制数字,表示文件的权限.其实文件的权限应该用4个八进制文件来表示,没有显示的那个是第一位,用来设定一些特殊的权限,这个八进制数字的三个位是:SUID.SGID.s ...

  8. bzoj3939 【USACO 2015 FEB GOLD 】cow hopscotch

    Description 就像人类喜欢玩"跳房子"的游戏,农民约翰的奶牛已经发明了该游戏的一个变种自己玩.由于笨拙的动物体重近一吨打,牛跳房子几乎总是以灾难告终,但这是没有阻止奶牛几 ...

  9. Ext4中内存使用技巧的一点思考

           今天在分析Ext4文件系统的时候,看到两个函数ext4_kvzalloc()/ext4_kvfree(),想到以前在使用kzalloc()/kmalloc()带来的内存分配失败问题,不得 ...

  10. stl_algorithm算法之排序算法

    排序算法: 注意:容器中必须重载 op< ,排序中stl标准中要求用小于来进行比较. 7.53.sort //全排序. 7.54.stable_sort //稳定排序.两个或两个以上的相邻且相等 ...