本文与《【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判断数据类型与真假值隐形转换研究

    一.引言 我们在开发的时候经常要判断真和假,这是我们经常写的代码: if(a){ alert(1) } 那我们怎么判定a是真还是假呢?下面这些值的真假又是多少呢?它们的数据类型又是怎样的呢? &quo ...

  2. 八：Lombok 安装、入门 - 消除冗长的 java 代码

    Lombok 安装.入门 - 消除冗长的 java 代码 前言:    逛开源社区的时候无意发现的,用了一段时间,觉得还可以,特此推荐一下.    lombok 提供了简单的注解的形式来帮助我们简化消 ...

  3. SDRAM操作说明

    SDRAM是做嵌入式系统中,常用是的缓存数据的器件.基本概念如下(注意区分几个主要常见存储器之间的差异): SDRAM(Synchronous Dynamic Random Access Memory ...

  4. File signature analysis failed to recognize .old file

    My friend May she found a strange file called "bkp.old" as below in the evidence files. Sh ...

  5. ionic开发遇到的坑及总结

    前言 ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS的优化.ionic会是一个可 ...

  6. Rigidbody组件及相关API

    Rigidbody:刚体组件,物理类.(与Rigidbody组件相关的代码尽量都写在FixedUpdate()方法中,如果写在Update()中有可能会卡顿) 属性:Mass:质量.         ...

  7. Android App插件式换肤实现方案

    背景 目前很多app都具有换肤功能,用户可以根据需要切换不同的皮肤,为使我们的App支持换肤功能,给用户提供更好的体验,在这里对换肤原理进行研究总结,并选择一个合适的换肤解决方案. 换肤介绍 App换 ...

  8. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  9. 微信小程序与Java后台的通信

    一.写在前面 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的, ...

  10. vue.js官方文档 PDF

    链接:https://pan.baidu.com/s/1jHMBb5W 密码:gsks