昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作，如果用submit表单提交挺方便的，但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了，因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据，今天用到了就分享一下。

由于我做的项目一些地方比较复杂，这里我只举一个小例子，能理解就好。

首先，我做了一个简单的多个复选框的界面，如图：

这是一个比较简单的多个复选框提交界面。代码如下：

 <body>

 <div>

    <input type="checkbox" name="check"  value="1"/>复选框1

    <input type="checkbox" name="check"  value="2"/>复选框2

    <input type="checkbox" name="check"  value="3"/>复选框3

     <br/>

    <input type="checkbox" name="check"  value="4"/>复选框4

    <input type="checkbox" name="check" value="5"/>复选框5

    <input type="checkbox" name="check"  value="6"/>复选框6

     <br/>

    <input type="checkbox" name="check"  value="7"/>复选框7

    <input type="checkbox" name="check"  value="8"/>复选框8

    <input type="checkbox" name="check"  value="9"/>复选框9

    <input type="button" id="dosubmit" value="提交">

 </div>

 </body>

然后就开始写jQuery程序了。代码如下：

 <script>

     $('#dosubmit').click(function(){

         var checkID = [];//定义一个空数组

         $("input[name='check']:checked").each(function(i){//把所有被选中的复选框的值存入数组

             checkID[i] =$(this).val();

         });

         //用Ajax传递参数

         $.post('Ajax.php',{checkID:checkID},function(json){

         },'json')

     })

 </script>

注意：写jQuery之前一定要引入JQ库文件，不然怎么搞都没用，可别大意了，我有时候就是这样.......

好了，准备工作都做好了，开始测试：

我先选中了几个框框：

点击“提交”按钮后，打开F12调试，结果如图所示：

OK，现在已经实现了使用jQuery结合Ajax批量操作复选框提交数据了。这里只是简单的示范一下jQuery结合Ajax的用法，界面和代码就简单点好了。

本文属原创内容，为了尊重他人劳动，转载请注明本文地址：

http://www.cnblogs.com/luokakale/p/7281628.html

jQuery选取所有复选框被选中的值并用Ajax异步提交数据的更多相关文章

  1. JQuery Mobile - 修改复选框的选中状态无效解决办法！

    今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...

  2. Jq复选框选择（取复选框被选中的值）

      <input type="button" id="btn5" value="获得选中的所有值"> <input typ ...

  3. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  4. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  5. jquery特效（6）—判断复选框是否选中进行答题提示

    前面有一段时间思想开了小差,跟着师父学习了一段时间才发现差距很大,看来我要奋起直追~\(≧▽≦)/~啦啦啦. 最近公司在做一个项目,需要根据用户选择的选项给出相应的提示,下面来看我写的测试程序的效果: ...

  6. jQuery获取单选框（复选框）选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

  7. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  8. 复选框checked 选中后不显示打钩

    复选框checked 选中后不显示打钩 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因   复选框绑定了click事件,点一次选中,再点击取 ...

  9. 案例1.通过Jquery来处理复选框

    实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...

随机推荐

  1. 你真的懂offset与scroll吗？

    背景 身为一个前端工程师,每次在做关于滚动或者定位之类的交互时,或多或少都会用到offset.scroll之类的元素属性值来计算距离,但是每次都是现用现百度,从来没有真正系统地弄明白其中的原理及用法: ...

  2. G彩娱乐网一个程序员到一个销售高手的心路历程

    0.引言 我大学本科读的是理工科,后来毕业以后,我逐渐走上了程 序员的道路.每天面对电脑一行一行的敲代码,这被我们程序员们戏称为"搬砖头",因为我们所做的事跟民工搬砖头砌墙本质上是 ...

  3. ④bootstrap列表使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 如何运用GitHub来提高生产效率

    这是一篇GitHub的入门级文章,主要针对git的初学者.我们将讨论初学者最关心的一些问题,如:为什么我们要使用GitHub,它的应用有哪些,如何运用它去帮助我们提高工作效率,以及它的基本用法有哪些. ...

  5. asp.net core 开发的https证书服务-agilelabs.net

    创建证书-生成CSR(Certificate Sign Request): 填写证书基本信息 接下来我们就可以看到创建的证书签名请求信息(CSR): 为我们刚才创建的CSR签名: 签名的意思是说通过证 ...

  6. Mybatis整理_01

    Mybatis专题 Mybaits介绍 Mybatis是一个持久化框架,它有不同语言的版本,比如.NET和Java都有Mybatis对应的类库:它有大多数ORM框架都具有的功能,比如自定义的SQL语句 ...

  7. Spring知识整理

    Spring简介 Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架,用来管理和维护bean,其中的特点是IOC(控制反转) DI(依赖注入) AOP(面向切面) 容易和其他框 ...

  8. 一起写框架-控制反转（Ioc）概述（二）

    控制反转概述 控制反转(Inversion of Control,英文缩写为IoC),就是将代码的调用的控制权,由调用方转移给被调用方. 如图:修改代码A类的代码,才能将B类的对象换成C类.代码的控制 ...

  9. 发放福利：原价135元/年的阿里云CDN流量包（500GB）免费送

    不少朋友看过本站推荐的两篇文章:1. <阿里云全民云计算活动:云服务器ECS二折起>2. <阿里云双11优惠活动-爆款云服务器> 大部分人都说不错,很快下单购买了服务器,后续使 ...

  10. ionic基本环境的搭建

    1.下载版本大于6的Node.js https://nodejs.org/en/ 个人喜欢下载最新版本 安装成功后可以用命令行工具输入node -v和npm -v分别查看node.npm版本 2.下载 ...