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实现表格排序方法
Jun 14 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
使用Python解析JSON数据的基本方法
2015/10/15 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
浅谈python常用程序算法
2019/03/22 Python
python logging添加filter教程
2019/12/24 Python
python str字符串转uuid实例
2020/03/03 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
小学清明节活动方案
2014/03/08 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
产品生产计划书
2014/05/07 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
营运督导岗位职责
2015/04/10 职场文书
三八妇女节致辞
2015/07/31 职场文书
2019同学聚会主持词
2019/05/06 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL