jquery实现复选框(checkbox)的全选与反选
来源:互联网 发布:蚁群算法应用 编辑:程序博客网 时间:2024/04/30 19:46
jquery实现复选框(checkbox)的全选与反选
下面介绍一下jquery实现checkbox的全选与反选。其实这个在网上已经有诸多实现了,我只是也来凑合凑合,没别的意思,只是不想把这个功能写个多复杂,尽量按照自己的理解简单化。简单、而且功能又实用,我觉得就足够了!
对于复选框的全选与反选,其实用的最多的是在于批量删除的时候,就像我这篇博客介绍的那样:打开链接,其中的success.jsp其实已经介绍了!全选与反选,其实它只是一个动态的效果,我们其实想要的是获取被选中的那些item的id,以便实现我们实际的功能性需求:“批量删除”。
好了,废话少说,我直接上代码吧!对了,你需要在eclipse建立一个动态的web工程,然后可以直接将下面的页面代码贴进你新建的一个称为index.jsp或者index.html中,当然啦,你需要jquery的库,在这里我用的jquery-1.7.3-min.js。其中,我还把如何获取被选中的所有的id也实现了!诸位博友可以参考!
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>全选与反选</title><script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript">$(function(){//实现全选与反选$("#allAndNotAll").click(function() { if (this.checked){ $("input[name='items']:checkbox").each(function(){ $(this).attr("checked", true); }); } else { $("input[name='items']:checkbox").each(function() { $(this).attr("checked", false); }); } });//获取被选中的idvar ids=[];$('#getAllSelectedId').click(function(){$("input[name='items']:checked").each(function(){ ids.push($(this).attr("id")); });var delIds=ids.join(","); console.log(delIds);//可以将delIds通过jquery ajax传到后台了,在后台采用String接收这个delIds参数,然后采用split(",")分隔得到一个//String[]的id数组。可以参考我的博客:http://blog.csdn.net/u013871100/article/details/52740061});});</script></head><body>员工列表:<br><br><input type="checkbox" name=items id="001"/>刘德华 <br><input type="checkbox" name=items id="002"/>张学友 <br><input type="checkbox" name=items id="003"/>黎明 <br><input type="checkbox" name=items id="004"/>郭富城 <br><br><br><input type="checkbox" id="allAndNotAll" />全选/反选<br><br><input type="button" id="getAllSelectedId" value="获取被选中的id"/><br></body></html>
下面是运行效果,点击“全选/反选”,可以看到效果,点击“获取被选中的id”,按F12可以看到浏览器的console端输出了被选中的id,当然啦,你也可以单独选几个,然后点击“获取被选中的id”,按F12依旧可以看到哪些被选中了!
好了,就介绍到这里吧,有疑问的博友可以在下面留言!
看书,学习了另外的一种方式相当简洁!!
//全选与反选方式二$("#allAndNotAll").click(function() { var flag=this.checked;$(":checkbox[name='items']").attr('checked',flag);});//而且还实现了:当其中不勾选某一个选项的时候,则去掉全选复选框$(":checkbox[name='items']").click(function(){$("#allAndNotAll").attr('checked',$(":checkbox[name='items']").length==$(":checkbox[name='items']:checked").length);});jquery真是够劲啊!!
0 0
- jquery实现复选框(checkbox)的全选与反选
- jquery实现checkbox复选框的全选反选
- jquery实现复选框的全选与反选
- checkbox复选框的全选与反选
- jquery实现复选框的全选和反选
- jQuery实现复选框的全选 反选 全不选
- jQuery实现复选框的全选和反选:
- jQuery实现复选框的全选和反选
- JQuery实现的 checkbox 全选、反选。
- JQuery实现的 checkbox 全选、反选。
- js实现复选框的全选与反选
- js实现复选框的全选与反选
- 实现复选框的全选与反选
- jQuery对复选框(checkbox)的全选,全不选,反选等的操作
- 复选框的全选与反选
- JavaScript学习笔记之js实现复选框checkbox的全选、反选示例
- 用jquery实现复选框checkbox的全选
- 【jQuery】jQuery实现checkbox的全选/反选逻辑
- 子图同构问题与Ullmann Algorithm 算法(一)
- 一个旋转菜单
- 静态库与动态库--Head First C读书笔记
- DVD项目
- 67. Add Binary
- jquery实现复选框(checkbox)的全选与反选
- 206. Reverse Linked List 链表
- Unity StrangeIoC框架
- NGUI中UICamera的EventType详解
- Programming In Scala笔记-第十一章、Scala中的类继承关系
- 【考研日记】:快乐学习法
- Java开发中的23种设计模式详解
- 3D全景!这么牛!!
- Pull解析