jquery 实现的全选和反选


Posted in Javascript onApril 15, 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#newsTable{margin:100px auto;} 
</style> 
<script language="javascript" type="text/javascript" src="jquery1.1.2.js"></script><!-上传到网络上用这个做连接--> 
<script language="javascript" type="text/javascript"> 
//阿会楠练习 2009-4-13 
$(document).ready(function(){ 
$("#btnOk").click(function(){ 
this.value = this.value == "全选"?"反选":"全选"; 
$("input[@type='checkbox']").checkCbx(); 
}); 
}); 
//当你的代码出现each时,你应该重写上面的代码来构造一个插件,jquery教程中的一句话 
$.fn.checkCbx = function(){ 
return this.each(function(){ 
this.checked = !this.checked; 
}); 
} 
</script> 
<title>无标题文档</title> 
</head> <body> 
<table border="1" id="newsTable"> 
<tr> 
<th>选择</th> 
<th>Id</th> 
<th>作者</th> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>1</td> 
<td>阿会楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>2</td> 
<td>阿会楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>3</td> 
<td>阿会楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>4</td> 
<td>阿会楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>5</td> 
<td>阿会楠</td> 
</tr> 
<tr> 
<td><input type="checkbox" name="cbx" /></td> 
<td>6</td> 
<td>阿会楠</td> 
</tr> 
<tr> 
<td colspan="3"><input type="button" name="btnOk" id="btnOk" value="全选" /></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
JS打印组合功能
Aug 04 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
Extjs Ajax 乱码问题解决方案
Apr 15 #Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 #Javascript
jQuery 入门讲解1
Apr 15 #Javascript
javascript 类方法定义还是有点区别
Apr 15 #Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 #Javascript
JavaScript获取GridView选择的行内容
Apr 14 #Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 #Javascript
You might like
PHP定时任务延缓执行的实现
2014/10/08 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Javascript模拟实现new原理解析
2020/03/03 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
详细解析Python中的变量的数据类型
2015/05/13 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python实现注册登录系统
2017/08/08 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
tensorflow获取变量维度信息
2018/03/10 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
Python列表如何更新值
2020/05/27 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
印度网上药店:1mg
2017/10/13 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
迎新春趣味活动方案
2014/08/24 职场文书
初中班主任工作随笔
2015/08/15 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android