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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
js blob类型url的视频下载问题的解决
Nov 29 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编写和读取XML的几种方式
2013/01/12 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
javascript类型转换示例
2014/04/29 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python逆向入门教程
2018/01/15 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
关于python写入文件自动换行的问题
2018/06/23 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
几道数据库的面试题或笔试题
2014/05/31 面试题
关于环保的标语
2014/06/13 职场文书
经费申请报告范文
2015/05/18 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
JavaScript执行机制详细介绍
2021/12/06 Javascript
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL