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实现前端分页功能
Mar 23 jQuery
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
python中JWT用户认证的实现
2020/05/18 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
开业庆典活动策划方案
2014/09/21 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
小班下学期个人总结
2015/02/12 职场文书
公诉意见书范文
2015/06/05 职场文书
大学生志愿者心得体会
2016/01/15 职场文书