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 相关文章推荐
javascript中的有名函数和无名函数
Oct 17 Javascript
js日期时间补零的小例子
Mar 05 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php array_search() 函数使用
2010/04/13 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
详解php协程知识点
2018/09/21 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
PHP重载基础知识回顾
2020/09/10 PHP
xmlHTTP实例
2006/10/24 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
详解Python3中的Sequence type的使用
2015/08/01 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python telnet登陆功能实现代码
2020/04/16 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
中国梦的演讲稿
2014/01/08 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
超市开学活动方案
2014/03/01 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
作弊检讨书
2015/01/27 职场文书
《春酒》教学反思
2016/02/22 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
python实现局部图像放大
2021/11/17 Python
JavaScript流程控制(分支)
2021/12/06 Javascript