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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现滑动开关效果
Aug 02 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判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
Python MD5文件生成码
2009/01/12 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python中的列表知识点汇总
2015/04/14 Python
Python中文件的读取和写入操作
2018/04/27 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
详解Python中的文件操作
2021/01/14 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
财务管理个人自荐书范文
2013/11/24 职场文书
营销专业应届生求职信
2013/11/26 职场文书
商超业务员岗位职责
2014/03/12 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
Python绘制散乱的点构成的图的方法
2022/04/21 Python