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实现下拉菜单的实例代码
Jun 19 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery中库的引用方法
Jan 06 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jquery插件实现悬浮的菜单
Apr 24 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扩展编写点滴 技巧收集
2010/03/09 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
php生成rss类用法实例
2015/04/14 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
5款实用的python 工具推荐
2020/10/13 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
学术会议通知范文
2015/04/15 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
Vue详细的入门笔记
2021/05/10 Vue.js
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android