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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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/04/22 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
php接口隔离原则实例分析
2019/11/11 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python time()的实例用法
2020/11/03 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
《火烧云》教学反思
2014/04/12 职场文书
竞选班委演讲稿
2014/04/28 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
云冈石窟导游词
2015/02/04 职场文书
公司搬迁通知
2015/04/20 职场文书
公司辞职信模板
2015/05/13 职场文书
关于做家务的心得体会
2016/01/23 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python