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
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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/07/09 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
开启PHP的伪静态模式
2015/12/31 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python快速查找算法应用实例
2014/09/26 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python的pygame安装教程详解
2020/02/10 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
华为python面试题
2016/05/03 面试题
和平主题的演讲稿
2014/01/12 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
vue 实现上传组件
2021/05/31 Vue.js