本文与《【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. 分布式框架Dubbo入门

    Dubbo简介 Dubbo是一个Alibaba开源额分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.dubbo就是个服务框架,只有在分布式的时候,才有dubb ...

  2. Linux下打造全方位立体监控系统

    前言 本文主要介绍如何使用Grafana和Prometheus以及node_exporter对Linux服务器性能进行监控.下面两张图分别是两台服务器: 服务器A 服务器B 概述 Prometheus ...

  3. Linux学习决心书

    学习Linux决心计划书 我叫耿长学,来自河南省邓州市,经过老男孩教育运维班5个月学习后,我一定要达到的薪水目标是11000元,为了达到此目标我将采取如下10大行动或方案: 1.每天早上5:30-6: ...

  4. Node.js初探之GET方式传输

    Node.js初探之GET方式传输 例子:form用GET方法向后台传东西 html文件: <form action="http://localhost:8080/aaa" ...

  5. JS获取DOM元素

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  6. ASP.NET没有魔法——ASP.NET MVC Controller的实例化与执行

    上一章节中对路由的注册和匹配过程进行了介绍,知道了MVC的Http请求最终是交由MvcHandler处理的,而其处理过程就是对Controller的创建.执行和释放. 本章将从以下几点进一步对上面提到 ...

  7. C#实现的apache htpasswd加密

    一.VisualSvn Server 这个软件大家都知道,具体使用时创建用户名密码和组时,每次都要登陆到VisualSvn Server所在的机器上,次次如此... 由于一些原因要把这个用户管理的功能 ...

  8. 重写Fields 控制models 数据输出字段

    models: public function Fields() { $fields = parent::Fields();//原来models输出字段 $fields['parentComment' ...

  9. 关于如何在微信里面让video不全屏播放

    发现一个更简单的解决方法,加上一条属性即可.x5-video-player-type="h5″.通过设置这个属性,让video开启同层H5播放器.另外在X5内核里,video是单独的一个vi ...

  10. 利用阿里云Centos7建站过程

    以下可能不尽详述,如有问题欢迎指出 准备过程:1. 阿里云主机一台2.域名一个 3.github个人帐号开始: 1.以root帐号登录云主机 2.安装apache [root@192 ~]# yum ...