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学习笔记一 之 数据类型
Dec 15 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 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入门教程之数学运算技巧总结
2016/09/11 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
vue全局使用axios的方法实例详解
2018/11/22 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
win10系统中安装scrapy-1.1
2016/07/03 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python编写一个闹钟功能
2017/07/11 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python3 修改默认环境的方法
2019/02/16 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python @property使用方法解析
2019/09/17 Python
Python print不能立即打印的解决方式
2020/02/19 Python
python实现快递价格查询系统
2020/03/03 Python
python如何代码集体右移
2020/07/20 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
出纳岗位职责
2013/11/09 职场文书
物流专员岗位职责
2014/02/17 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
刮痧观后感
2015/06/05 职场文书
垂直极限观后感
2015/06/08 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS