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"> ...
随机推荐
- iOS SDWebImage知识点
1.clear 和 clean clear 先把之前的缓存文件夹删除掉,然后新建一个文件夹 clean 先删除过期的文件,然后计算剩余缓存文件的大小 currentSize > maxSize, ...
- Android中获得网络状况的实现
要得知网络状况就是要用networkinfo类这个类名还是把这个类的意思表达的很清晰的,network是网络,info是状况.判断是否有网用到了这个类的IsAvailable方法,这个方法返回的是这个 ...
- Flutter去除右上角Debug标签
void main(){ runApp(new MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState creat ...
- 每天一套题打卡|河南省第十一届ACM/ICPC
A 计划日 题意:已知李明在YYYY年MM月DD日星期W订了学习计划,现在想看看李明N天后的完成情况和个人总结,你能告诉我那天的日期和星期几吗? 模拟日期计算: 计算星期可以用基姆拉尔森公式 //中国 ...
- <抽象工厂>比<工厂方法>多了啥
前言:仅当复习讨论,写得不好,多多指教! 上一篇文章<比多了啥>介绍了简单工厂模式和工厂方法模式.本篇文章则讲最后一个工厂----抽象工厂.如果对工厂方法比较模糊的,可以返回上一篇文章复习 ...
- angular + socket.io+nodejs
一.服务器端: 基本和nodejs工程相同 https://www.cnblogs.com/xuanmanstein/p/10509445.html 安装socket.io npm i --save ...
- gcc使用及动静态库制作
一. GCC的使用 1. GCC的编译过程 (1)预处理(cpp)gcc -E(输出问价通常以 .i 结尾),将头文件展开,宏替换等操作: (2)编译器(gcc)gcc -S(输出问价以 .s 结尾) ...
- locust启动命令
locust运行测试脚本 locust -f .\load_test.py --host=https://www.baidu.com -f 指定性能测试脚本文件. --host 指定被测试应用的URL ...
- 性能测试系列-java gc调优
性能测试中除了需要做好性能测试外,我们还需要做性能测试后的,性能调优,需要发现性能问题,也需要做性能调优,在做性能调优中,jvm的性能调优是经常遇到的一个. 随着jdk版本的迅速变化,jdk里面的GC ...
- ElasticSearch 6.2 Mapping参数说明及text类型字段聚合查询配置
背景: 由于本人使用的是6.0以上的版本es,在使用发现很多中文博客对于mapping参数的说明已过时.ES6.0以后有很多参数变化. 现我根据官网总结mapping最新的参数,希望能对大家有用处. ...