【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与《【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】复选框的全选、反选，推断哪些复选框被选中的更多相关文章
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- jquery简单实现复选框的全选与反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery实现复选框的全选、全不选、反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQ实现复选框的全选反选不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...
- js实现复选框的全选、全不选和反选
js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...
- 【JavaScript】实现复选框的全选、全部不选、反选
以较为简洁的程序实现复选框的全选.全部不选.反选 操作. 并且将可变的部分设置为JS的参数,以实现代码复用. 全选和全不选 第一个参数为复选框名称,第二个参数为是全选还是全部不选. function ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- jQuery学习(五)——使用JQ完成复选框的全选和全不选
1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...
随机推荐
- Linux安装nginx代理服务器
Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...
- Python中time和datetime模块的简单用法
python中与时间相关的一个模块是time模块,datetime模块可以看为是time模块的高级封装. time模块中经常用到的有一下几个方法: time()用来获取时间戳,表示的结果为从1970年 ...
- C#的Random到底该怎么使用
先看代码: 在循环中,有的只NEW一个Random,有的每次都NEW 一个Random. Console.WriteLine("1.多个Random,默认随机种子,"); ; i ...
- JAVA的继承，构造函数，窗体
import java.awt.*; import javax.swing.*; import javax.swing.JFrame; import java.awt.event.WindowList ...
- js判断手机或Pc端登陆.并跳转到相应的页面
<script src="~/Web/js/jquery-1.10.1.min.js"></script> <script> $(functio ...
- 关于tolua的使用
一.首先在引擎的跟目录下找到cocos2d-x自带的工具tolua++ 二.使用tolua++生成自定义类的声明 打开tool文件夹中的readme文件如下: 1. Generating the lu ...
- Eclipse创建一个JAVA WEB项目
继上一篇博客,Eclipse的Tomcat已经配置好了,现在我们开始创建web项目. 1.打开Eclipse,选择菜单栏的file>New>Dynamic Web Project 弹出窗口 ...
- oracle 物化视图 job
在oracle数据库里边,创建物化视图之后,系统在DBMS_jobs文件夹下,会自动创建相应的job,右键执行job的时候报错如下: 问题:ORA-12012: 自动执行作业 198 出错 ORA-1 ...
- PHP使用api的两种方法
1.用file_get_contents()函数 $params = array('key' => '8d284859d04cfeeea6b0771f754adb49', 'location' ...
- 爬虫day 04_01(爬百度页面)
import urllib.request import http.cookiejar from lxml import etree head = { 'Connection': 'Keep-Aliv ...