jquery实现的全选反选全不选等等的效果源码

原创 2012年07月12日 17:25:25
test.html:(下载测试的话是必须配置下jquery的文件的。即是:
 <script src="jquery-1.3.2.js" type="text/javascript"></script>
这个语句需要修改)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title></title> <!-- 引入jQuery --> <script src="jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked', true); }); //全不选 $("#CheckedNo").click(function(){ $('[type=checkbox]:checkbox').attr('checked', false); }); //反选 $("#CheckedRev").click(function(){ $('[name=items]:checkbox').each(function(){ //$(this).attr("checked", !$(this).attr("checked")); this.checked=!this.checked; }); }); $("#send").click(function(){ var str="你选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }) </script></head><body><form method="post" action=""> 你爱好的运动是? <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="羽毛球"/>羽毛球 <input type="checkbox" name="items" value="乒乓球"/>乒乓球 <br/> <input type="button" id="CheckedAll" value="全 选"/> <input type="button" id="CheckedNo" value="全不选"/> <input type="button" id="CheckedRev" value="反 选"/> <input type="button" id="send" value="提 交"/></form></body></html>



JQuery实现全选、全不选和反选功能

项目中需要做一个全选、全不选和反选的功能。刚接到这个需求的时候,心想很简单的一个功能,几行代码就能搞定,然而事实并非如此。下面就把我的思路说一下: 1、当点击'全选'按钮时,页面中所有的复选框都应...
  • oXinLiang12
  • oXinLiang12
  • 2016年12月12日 16:01
  • 3203

jQuery实现全选、全不选和反选,没有只能选一次的bug

学习到用.attr设置checked属性时出现全选只能实现一次的效果(关键是作业必须用button做)。。很郁闷。。终于找到解决的办法啦: 第一个比较不常用 的用button来做得全选全不选和反选按钮...
  • tsh18523266651
  • tsh18523266651
  • 2015年12月26日 17:19
  • 586

js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下: Document 你的呢爱好很广泛!! 全选/全不选 足球 篮球 游泳 唱歌 ...
  • sinat_21206105
  • sinat_21206105
  • 2016年09月01日 21:13
  • 8227

JS之全选全不选反选的操作

练习 对如下的Form表单: form id="test-form" action="test"> legend>请选择想要学习的编程语言:legend> fieldset>...
  • xinwen1995
  • xinwen1995
  • 2016年09月20日 15:40
  • 284

jquery实现全选和全不选功能

无标题文档     $(document).ready(function () {         $("#checkedAll").click(function () {       ...
  • haibo0668
  • haibo0668
  • 2016年09月13日 15:45
  • 1905

javascript实现全选全不选

在JSP页面中有6个复选框,第一个复选框是全选和全不选,其余5个为普通复选框,当点击全选复选框后,普通复选框将被全部选中,如果再次点击 全选复选框,那么普通复选框将被全部不选中,同时,如果全选复选框在...
  • u011740475
  • u011740475
  • 2014年12月05日 10:21
  • 1831

jQuery实现表单全选、全不选以及反选的功能

本文主要介绍了利用jQuery实现表单的全选、全不选以及反选的功能。对如下的form表单: 请选择想要学习的编程语言: ...
  • github_38383183
  • github_38383183
  • 2017年06月22日 20:07
  • 714

关于jquery全选和取消全选遇到的只能选一次问题记录

今天想用jquery写个全选与取消全选的案例,出了点小问题,先把代码贴出来吧: 全选 篮球 足球 $(function(){ $("#alld...
  • a386611016
  • a386611016
  • 2015年07月24日 10:04
  • 683

RecyclerView全选反选

//在主布局里         android:id="@+idtton2"         android:layout_width="0dp"         android:layout_we...
  • qq_35889484
  • qq_35889484
  • 2016年11月23日 21:30
  • 1280

jQuery_review之jQuery实现多选框的反选、全选、全不选

有几个非常常见的知识点,需要重点关注一下。如何显示多选框呢?。这样就能表示两个多选框,他们具有同样的name值,在JSP中,传到后台的时候,可以使用request.getParameterValues...
  • ziwen00
  • ziwen00
  • 2014年07月25日 21:10
  • 3509
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现的全选反选全不选等等的效果源码
举报原因:
原因补充:

(最多只允许输入30个字)