jquery实现复选框(checkbox)的全选与反选 |
您所在的位置：网站首页 › windows中复选框的功能是 › jquery实现复选框(checkbox)的全选与反选 |
jquery实现复选框(checkbox)的全选与反选
|
jquery实现复选框(checkbox)的全选与反选 下面介绍一下jquery实现checkbox的全选与反选。其实这个在网上已经有诸多实现了，我只是也来凑合凑合，没别的意思，只是不想把这个功能写个多复杂，尽量按照自己的理解简单化。简单、而且功能又实用，我觉得就足够了！ 对于复选框的全选与反选，其实用的最多的是在于批量删除的时候，就像我这篇博客介绍的那样：打开链接，其中的success.jsp其实已经介绍了！全选与反选，其实它只是一个动态的效果，我们其实想要的是获取被选中的那些item的id，以便实现我们实际的功能性需求：“批量删除”。 好了，废话少说，我直接上代码吧！对了，你需要在eclipse建立一个动态的web工程，然后可以直接将下面的页面代码贴进你新建的一个称为index.jsp或者index.html中，当然啦，你需要jquery的库，在这里我用的jquery-1.7.3-min.js。其中，我还把如何获取被选中的所有的id也实现了！诸位博友可以参考！ 全选与反选 $(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); }); } }); //获取被选中的id var 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 }); }); 员工列表: 刘德华 张学友 黎明 郭富城 全选/反选 下面是运行效果，点击“全选/反选”，可以看到效果，点击“获取被选中的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真是够劲啊!! |
【本文地址】
今日新闻 |
推荐新闻 |