本文与《【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. NHibernate查询示例合集

    基本查询   复杂查询示例 /// <summary> /// 获取自定义表单数据中属于部门的部分 /// </summary> /// <param name=&quo ...

  2. Java反射机制使用场景

    import java.io.*; import java.util.Properties; /*问题描述:存在一个主板--已经定义好,不想修改其代码,还想在主板上面增加一些其他功能? *问题解决方法 ...

  3. c#关键字及ref和out

    最近在写程序时遇到ref,out 参数问题.回头有自习看了看MSDN,才有巩固了基础.我把我的测试程序贴出来,大家分享一下.    ref 关键字使参数按引用传递.其效果是,当控制权传递回调用方法时, ...

  4. MacOS 下安装mysqlclient 的问题及解决办法

    [操作环境] 操作系统:MacOS X 10.13.1 mysql运行环境:Docker Docker版本:17.09-ce 在开发Django时,刚开始使用的sqlite进行开发,想部署到生产环境需 ...

  5. （转）Ubuntu 12.04 中安装和配置 Java JDK

    http://www.cnblogs.com/bluestorm/archive/2012/05/10/2493592.html 先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-7 ...

  6. springmvc跨域+token验证（app后台框架搭建二）

    这是app后台框架搭建的第二课,主要针对app应用是跨域的运用,讲解怎么配置跨域服务:其次讲解怎么进行token验证,通过拦截器设置token验证和把token设置到http报文中.主要有如下:   ...

  7. vpn服务器搭建

    这里我们用CentOS6.0和Shdowsocks搭建 首先了解几个命令 wget 是一个从网络上自动下载文件的自由工具,支持通过 HTTP.HTTPS.FTP 三个最常见的 TCP/IP协议 下载, ...

  8. centos6.7安装openblas错误

    centos系统:CentOS release 6.7 (Final)安装OpenBLAS # Install OpenBLAS at /usr/local/openblas git clone ht ...

  9. SQL SERVER 2012 SEQUENCE

    一.Sequence简介 Sequence对象对于Oracle用户来说是最熟悉不过的数据库对象了, 在SQL SERVER2012终于也可以看到这个对象了.Sequence是SQL Server201 ...

  10. Flash真的老了，HTML5将取代其地位

    简单讲一些网页开发的趋势吧! Flash老了 Flash是一个落后于时代的技术,靠对客户端的高资源占用率来获取传输过程的低带宽占用. Flash不再安全 Flash是一个落后于时代的技术,靠对客户端的 ...