jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例


Posted in jQuery onAugust 04, 2017

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

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

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

jQuery选取所有复选框被选中的值并用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库文件,不然怎么搞都没用,可别大意了,我有时候就是这样.......

好了,准备工作都做好了,开始测试:

我先选中了几个框框:

jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

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

jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

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

以上这篇jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 #jQuery
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解jquery选择器的原理
Aug 01 #jQuery
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
有关php运算符的知识大全
2011/11/03 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
FCK调用方法..
2006/12/21 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python实现从wind导入数据
2019/12/03 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
幼儿园毕业家长感言
2014/02/10 职场文书
《花木兰》教学反思
2014/04/09 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2014年安全员工作总结
2014/11/13 职场文书
会计工作总结范文2014
2014/12/23 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python