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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 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 分页类实现代码
2009/12/03 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP中的类型约束介绍
2015/05/11 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
简单的代码实现jquery定时器
2014/01/03 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python 内置函数汇总详解
2019/09/16 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
财务管理专业应届毕业生求职信
2013/09/22 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
后进生转化工作制度
2014/01/17 职场文书
工程专业应届生求职信
2014/02/19 职场文书
材料物理专业求职信
2014/09/01 职场文书
毕业论文致谢范文
2015/05/14 职场文书
任长霞观后感
2015/06/16 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Nginx利用Logrotate实现日志分割
2022/05/20 Servers