本文与《【JavaScript】复选框的全选、反选。推断哪些复选框被选中》（点击打开链接）为姊妹篇，把里面内容再与jQuery框架中实现一次，相同做到例如以下的效果：

布局还是相同的布局，仅仅是因为在jQuery框架中，无须再为button，指定特定的onclick事件处理函数，直接使用jQuery指定就可以：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>全选、反选</title>

		<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    </head>

    <body>

	<button id="selected"/>哪里复选框被选中？ </button>

	<button id="selectAll"/>全选</button>

	<button id="selectReserve"/>反选</button><br/>

	1<input type="checkbox" name="checkBoxGroup" value="1"/><br/>

	2<input type="checkbox" name="checkBoxGroup" value="2"/><br/>

	3<input type="checkbox" name="checkBoxGroup" value="3"/><br/>

	4<input type="checkbox" name="checkBoxGroup" value="4"/><br/>

</body>

</html>

之后在jQuery中。取name为checkBoxGroup的复选框数组。直接能够这样写：$(":checkbox[name='checkBoxGroup']")。当然$("input[type='checkbox'][name='checkBoxGroup']")也行。仅仅是$(":checkbox[name='checkBoxGroup']")代码更加简单，注意checkbox前面的冒号。

拿出来的东西是与Javascript的document.getElementsByName("xx")一样。同位复选框数组。

仅仅是在jQuery中能够直接利用each去遍历。为复选框设置选中与否使用prop，不要用attr。详细在《【jQuery】对于复选框操作的attr与prop》（点击打开链接）已经说过了。

<script type="text/javascript">

	//哪里复选框被选中？

	$("#selected").click(function(){

		var str="被选中的复选框：";

		$(":checkbox[name='checkBoxGroup']:checked").each(function(){

			str+=$(this).val()+",";

		});

		alert(str);

	});

	//全选

	$("#selectAll").click(function(){

		$(":checkbox[name='checkBoxGroup']").each(function(){

			$(this).prop("checked",true);

		});

	});

	//反选

	$("#selectReserve").click(function(){

		$(":checkbox[name='checkBoxGroup']").each(function(){

			$(this).prop("checked",!$(this).prop("checked"));

		});

	});

</script>

【jQuery】复选框的全选、反选，推断哪些复选框被选中的更多相关文章

  1. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  2. jquery简单实现复选框的全选与反选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery实现复选框的全选、全不选、反选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  6. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  7. 【JavaScript】实现复选框的全选、全部不选、反选

    以较为简洁的程序实现复选框的全选.全部不选.反选 操作. 并且将可变的部分设置为JS的参数,以实现代码复用. 全选和全不选 第一个参数为复选框名称,第二个参数为是全选还是全部不选. function ...

  8. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  9. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

随机推荐

  1. JAVAscript学习笔记 jsBOM 第七节 （原创） 参考js使用表

    <html> <head> <title>day02_js</title> <script type="text/javascript& ...

  2. 用代理IP进行简单的爬虫——爬高匿代理网站

    用西刺代理网站的IP爬高匿代理网站 import re import _thread from time import sleep,ctime from urllib.request import u ...

  3. js数组元素的添加和删除

    简单测试例子: var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "cc ...

  4. Linux系列教程（十七）——Linux权限管理之文件系统系统属性chattr权限和sudo命令

    上篇博客我们介绍了权限管理的ACL权限,通过设定 ACL 权限,我们为某个用户指定某个文件的特定权限.这篇博客我们将介绍权限管理中用的比较多的两个命令 chattr 和 sudo . 1.设定文件系统 ...

  5. java输出各种学生成绩

    class stu { public String stuno; public String name; public float math; public float english; public ...

  6. [转载] 深入剖析 redis 主从复制

    转载自http://www.cnblogs.com/daoluanxiaozi/p/3724299.html 主从概述 redis 支持 master-slave(主从)模式,redis server ...

  7. [转载] Lucene 工作原理

    转载自http://www.cnblogs.com/dewin/archive/2009/11/24/1609905.html Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引 ...

  8. iOS多线程--深度解析

    多线程 你们项目中为什么多线程用GCD而不用NSOperation呢? 你有没有发现国外的大牛他们多线程都是用NSOperation? 你能告诉我他们这样做的理由吗? 关系: ①:先搞清两者的关系,N ...

  9. eclipse自定义代码模板

    eclipse自定义代码模板 Eclipse 提供了非常多的代码模板,我们可以通过 Windows->Preferences->Java->Editor->Templates ...

  10. [最短路]P1828 香甜的黄油 Sweet Butter

    题目描述 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧场上,他知道N(1<=N<=500)只奶牛会过来舔它,这样就能做出能卖好价钱的超甜黄油.当然,他将付出额外的费 ...