jQuery选取所有复选框被选中的值并用Ajax异步提交数据
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用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库文件,不然怎么搞都没用,可别大意了,我有时候就是这样.......
好了,准备工作都做好了,开始测试:
我先选中了几个框框:

点击“提交”按钮后,打开F12调试,结果如图所示:

OK,现在已经实现了使用jQuery结合Ajax批量操作复选框提交数据了。这里只是简单的示范一下jQuery结合Ajax的用法,界面和代码就简单点好了。
本文属原创内容,为了尊重他人劳动,转载请注明本文地址:
http://www.cnblogs.com/luokakale/p/7281628.html
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的更多相关文章
- JQuery Mobile - 修改复选框的选中状态无效解决办法!
今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...
- Jq复选框选择(取复选框被选中的值)
<input type="button" id="btn5" value="获得选中的所有值"> <input typ ...
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- jquery特效(6)—判断复选框是否选中进行答题提示
前面有一段时间思想开了小差,跟着师父学习了一段时间才发现差距很大,看来我要奋起直追~\(≧▽≦)/~啦啦啦. 最近公司在做一个项目,需要根据用户选择的选项给出相应的提示,下面来看我写的测试程序的效果: ...
- jQuery获取单选框(复选框)选中的状态
jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...
- jquery完成带复选框的表格行高亮显示
jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...
- 复选框checked 选中后不显示打钩
复选框checked 选中后不显示打钩 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因 复选框绑定了click事件,点一次选中,再点击取 ...
- 案例1.通过Jquery来处理复选框
实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...
随机推荐
- 直方图均衡化C++实现
直方图均衡化在图像增强方面有着很重要的应用.一些拍摄得到的图片,我们从其直方图可以看出,它的分布是集中于某些灰度区间,这导致人在视觉上感觉这张图的对比度不高.所以,对于这类图像,我们可以通过直方图均衡 ...
- scp命令,用来在本地和远程相互传递文件,非常方便
scp是secure copy的简写,用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器 ...
- 关于Makefile,Makefile.in,Makefile.am,Configure功能及相互关系的问题
makefile写法 在 Unix 上写程式的人大概都碰过 Makefile,尤其是用 C 来开发程式的人.用 make来开发和编译程式的确很方便,可是要写出一个 Makefile就不简单了.偏偏介绍 ...
- iOS 中的 Delayed Transition
Android 的动画体系中,存在一类由 TransitionManager. beginDelayedTransition 管理的动画.这个方法,很特殊.执行此方法后,其后续的 UI 变化,不会立即 ...
- Javascript判断数据类型与真假值隐形转换研究
一.引言 我们在开发的时候经常要判断真和假,这是我们经常写的代码: if(a){ alert(1) } 那我们怎么判定a是真还是假呢?下面这些值的真假又是多少呢?它们的数据类型又是怎样的呢? &quo ...
- Android AsyncTask内部线程池异步执行任务机制简要分析
如下分析针对的API 25的AsyncTask的源码: 使用AsyncTask如果是调用execute方法则是同步执行任务,想要异步执行任务可以直接调用executeOnExecutor方法,多数情况 ...
- 一起写框架-Ioc内核容器的实现-基础功能-getBean(五)
实现的功能 1. 启动程序时,将@ComponentScan加载的类,创建对象并放在容器里面.(查看上一篇文) 2. 通过ApplicatoinContext的getBean()方法获得容器里面的对象 ...
- javaMybatis映射属性,高级映射
映射文件的sql属性: id:标识符(一般都是dao层方法名) resultType:sql返回类型 resultMap:放回的映射类型 parameterType:参数类型 useGenerated ...
- [转]Spring.Net介绍
转自:http://www.cnblogs.com/cilence/archive/2013/02/21/2920478.html Spring.NET下载地址:http://www.springfr ...
- Django 入门案例开发(下)——创建项目应用及模型类
前面两章是在已经开发好的项目上用来描述环境和业务,这一章创建一个全新的项目来用作开发,你可以跟着我的步骤进行开发,如果有不理解的地方可以给我留言. 今天的任务是创建好项目和用户(users)应用及让它 ...