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获取服务器时间的两个简单方法
Jan 08 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
jQuery选择器全面总结
Jan 06 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
PHP4中实现动态代理
2006/10/09 PHP
source.php查看源文件
2006/12/09 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
PHP生成唯一订单号
2015/07/05 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Python三级目录展示的实现方法
2016/09/28 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python实现一组典型数据格式转换
2018/12/15 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
总经理助理岗位职责范本
2015/03/31 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS