JQuery案例二:实现全选、全不选和反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选以及反选</title>
<script src="../js/jquery-1.8.3.js"></script>
<script>
$(function() {
//全选事件
$("#checkedAll").click(function() {
$(".checkedOne").attr("checked",this.checked);
});
$("#reSelect").click(function() {
$(".checkedOne").each(function() {
this.checked = !this.checked;
});
});
});
</script>
</head>
<body>
<table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">
<thead>
<tr>
<th><input type = "checkbox" id="checkedAll">全选</input></th>
<th>编号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkedOne"/></td>
<td>1</td><td>张三</td><td>12</td>
</tr>
<tr>
<td><input type="checkbox" class="checkedOne"/></td>
<td>2</td><td>李四</td><td>22</td>
</tr>
<tr>
<td><input type="checkbox" class="checkedOne" /></td>
<td>3</td><td>王五</td><td>13</td>
</tr>
<tr>
<td><input type="checkbox" class="checkedOne"/></td>
<td>4</td><td>马六</td><td>14</td>
</tr>
<tr>
<td><input type="checkbox" class="checkedOne"/></td>
<td>5</td><td>伍六七</td><td>17</td>
</tr>
<tr>
<td><input type="checkbox" class="checkedOne"/></td>
<td>6</td><td>梅花十三</td><td>17</td>
</tr>
<tr>
<td colspan=4><input type="button" value="反选" id="reSelect" /></td>
</tr>
</tbody>
</table>
</body>
</html>
JQuery案例二:实现全选、全不选和反选的更多相关文章
- 全选全不选案例table表格
全选全不选案例table表格 案例一纯table表格 <table class="table table-bordered"> <thead class=&quo ...
- jquery之全选全不选
<input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...
- jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
- Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
- jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- 王之泰/王志成《面向对象程序设计(java)》第十一周学习总结
第一部分:理论知识学习部分 第十一章理论知识主要为集合类的介绍,在实验中都有所体现且本周主要复习回顾上周的泛型程序设计 第二部分:实验部分 ——集合 1.实验目的与要求 (1) 掌握Vetor.Sta ...
- Python线程模块threading
线程,程序执行的最小单元,单线程处理多个任务只能一个处理完后继续处理下一个直到全部处理完,多线程处理任务会比单线程处理起来快吗?在python程序里得看情况,首先有GIL锁的存在导致同一时刻只能有一个 ...
- plsql连接oracle
在plsql中: 需要在工具----选项 指定 1. orcacle 主目录 :G:\PLSQL Developer 11.0.0.1762 中文绿色注册版(免Oracle11g客 ...
- nodejs的jekins部署
第一步 gitlab项目仓库给jekins服务器分配一个账号develop权限用于拉取代码. 分支为master. 第二步 jekins配置打包脚本. npm install --registry=h ...
- ubuntu安装nvidia显卡驱动
朋友挖矿,需要给Ubuntu(16.04版本)系统安装nvidia的显卡驱动,请我帮忙.最开始是进行手动安装.无奈的是安装完后进不了图形化界面.今天正好有时间,找了个硬盘装了个Ubuntu进行测试,成 ...
- node+ejs模板引擎的应用
前言: 最近在开发一个关于后台管理系统的基础开发平台,解释一下就是不管什么管理系统都有一些相同的功能,但是又有一些细节不一样,这个基础平台就是实现对于基础功能可以进行快速开发,主要有自定义的生成功能代 ...
- Spring MVC 返回Json数据环境记录
Spring 版本 Spring4.3.18 Json包 jackson-annotations-2.9.8.jar jackson-core-2.9.8.jar jackson ...
- python标准库总的random函数用法
Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等.random中的一些重要函数的用法:1 ).random() 返回0& ...
- JUC原子类--01
JUC原子操作类分为四种类型 1. 基本类型: AtomicInteger, AtomicLong, AtomicBoolean ;2. 数组类型: AtomicIntegerArray, Atomi ...
- 有趣的if循环
今天,在论坛看到一个有趣的if 循环,我感觉有不错,就分享出来 问题,列表只有6个数,为什么打印8个数?原理? q = ['a', 'b', 'c', 'd', 'e', 'f'] for i in ...