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 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
js实现两点之间画线的方法
May 12 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 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中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
python条件和循环的使用方法
2013/11/01 Python
Python 异常处理实例详解
2014/03/12 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
python爬虫增加访问量的方法
2019/08/22 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python pygame实现球球大作战
2019/11/25 Python
python TCP包注入方式
2020/05/05 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
新东网科技Java笔试题
2012/07/13 面试题
电子商务专业推荐信范文
2013/12/02 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python