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实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php 抽象类的简单应用
2011/09/06 PHP
php三元运算符知识汇总
2015/07/02 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
为什么要有struct关键字
2012/05/08 面试题
几道数据库的概念性面试题
2014/05/30 面试题
先进事迹报告会感言
2014/01/24 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
食品安全演讲稿
2014/09/01 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
何玥事迹观后感
2015/06/16 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
浅谈Python类的单继承相关知识
2021/05/12 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang