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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
ES6学习教程之Promise用法详解
Nov 22 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
做个自己站内搜索引擎
2006/10/09 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
浅析JS运动
2015/12/28 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
基于js中的原型(全面讲解)
2017/09/19 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
几款好用的python工具库(小结)
2020/10/20 Python
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
送餐员岗位职责范本
2014/02/21 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
三方合作协议书范本
2014/04/18 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Vue.Draggable实现交换位置
2022/04/07 Vue.js