本文与《【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. centos6.7系统安装流程

    虚拟机创建centos的过程,如下: 1.首先创建一个空白文件 2.打开虚拟机,打开文件,或者页面的<创建虚拟机>,如下: 3.打开之后如下所示,选择自定义,Linux崇尚自由 4.第四步 ...

  2. openstack学习心得：keystone 常用命令（M版）

    查看用户列表 openstack user list 查看用户具体信息 usage: openstack user show [-h] [-f {html,json,json,shell,table, ...

  3. CSS3属性——“box-flex”

    CSS3的新增属性有很多,其中有一个比较神奇的,通常称为盒子模型布局,不需要把div浮动,也能合理分配.看如下例子: HTML: <div id="box"> < ...

  4. 初生牛犊不怕虎 golang入坑系列

    读前必读,下面所有内容都是来自这里. 放到这里的目的,就是为了比对一下,哪里的读者多.平心而论,同样的Markdown,博客园排版真心X看,怎么瞅怎么X看.(X := '难' || X :='耐' | ...

  5. 利用VGG19实现火灾分类(附tensorflow代码及训练集)

    源码地址 https://github.com/stephen-v/tensorflow_vgg_classify 1. VGG介绍 1.1. VGG模型结构 1.2. VGG19架构 2. 用Ten ...

  6. 利用Angular实现多团队模块化SPA开发框架

    0.前言 当一个公司有多个开发团队时,我们可能会遇到这样一些问题: 技术选项杂乱,大家各玩各 业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现) 业务壁垒,业 ...

  7. flex布局元素操作详情

    之前布局一直用的是 position,float之类的,趁着国庆学习一下 flex 布局 父元素: flex-direction: row row-reverse column column-reve ...

  8. centos6.5 短信猫部署发短信

    本文为在centos下部署短信猫发短信使用,以下为具体环境和步骤说明,欢迎留言! 一.环境说明 服务器:centos6.5 x64 依赖包:lockdev-1.0.1-18.el6.x86_64.rp ...

  9. SaltStack 部署案例 02

    远程执行 salt '*' state.sls apache '*':代表所有主机 state.sls :是一个模块 apache : 状态 ,表示需要部署的内容,后缀.sls YAML:三板斧 1. ...

  10. 熟悉Objective—C

    1.oc使用消息结构而非函数调用 使用消息结构的语言,运行时所应执行的代码由运行环境来决定,而是用函数调用的语言,则由编译器决定.函数调用:如果调用的函数是多态的,那么在运行时就要按照“虚方法表”来查 ...