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实现随机替换图片的方法
Apr 16 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vue-router 学习快速入门
Mar 01 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 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 session机制
2011/07/17 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
php实现的顺序线性表示例
2019/05/04 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
详解ES6中的三种异步解决方案
2018/06/28 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
利用python如何处理nc数据详解
2018/05/23 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python 实现超级玛丽游戏
2020/11/25 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
2014年公司迎新年活动方案
2014/02/24 职场文书
推荐信模板
2014/05/09 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android