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 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
用Python编写简单的微博爬虫
2016/03/04 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
大学生实习证明范本
2014/01/15 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
活动总结模板
2014/05/09 职场文书
慰问信范文
2015/02/14 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记