jQuery实现类似淘宝购物车全选状态示例


Posted in Javascript onJune 26, 2013

jQuery实现类似淘宝购物车全选状态示例

<!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" /> 
<title>我是投资者</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<style type="text/css">*{margin:0;padding:0;color:#727272;font-size:12px; outline:none;} 
table{ border-collapse:collapse; border-spacing:0; } 
a{color:#3A3A3A; text-decoration:none; color:#575757;} 
a:hover{ text-decoration:none;} 
.L_user .mailspage{ background:#fff;} 
.L_user .mailspage .mail{padding-bottom:25px;} 
.L_user .mailspage .mail p{margin:0px 0 5px 5px; padding-top:5px;} 
.L_user .mailspage .mail table{width:745px; text-align:center;} 
.L_user .mailspage .mail .table_box{ width:745px;border:1px solid #DDDDDD;margin:0 0 0px 10px;} 
.L_user .mailspage .mail .firsttr{border-top:none;} 
.L_user .mailspage .mail td{ height:30px; line-height:30px;} 
.L_user .mailspage .sendmsm {margin-top:25px;} 
.L_user .mailspage .sendmsm div{margin:0 0 10px 40px;} 
.L_user .mailspage .sendmsm div label{ width:50px; text-align:right; display:inline-block; vertical-align:middle;margin-right:5px;} 
.L_user .mailspage .sendmsm div input{margin-right:5px; border:1px solid #ccc; height:20px; line-height:20px; padding-left:5px; vertical-align:middle; border-radius:5px;} 
.L_user .mailspage .sendmsm div textarea{ width:270px; height:130px; vertical-align:top;border:1px solid #ccc; padding:5px; border-radius:5px;} 
.L_user .mailspage .sendmsm div a{width:108px; height:35px; display:inline-block; background:url(../images/L_btn0615.jpg) no-repeat -8px -72px; vertical-align:middle;margin-right:10px;} 
.L_user .mailspage .sendmsm div a:hover{ background-position:-8px -115px;} 
.L_user .mailspage{width:768px; border:1px solid #E5E5E5; float:left; overflow:hidden;} 
.L_user .mailspage .loantab{background:#fff;border-bottom:1px solid #E5E5E5; } 
.L_user .mailspage .loantab a{width:127px; height:40px; border:1px solid #E5E5E5; border-bottom:none;display:inline-block; text-align:center; border-left:none; border-top:none; line-height:40px; color:#464646; font-weight:bold; } 
.L_user .mailspage .loantab a.c{ background:#F4F4F4; color:#CF161C;} 
.L_user .mailspage .mail .markbtn a{ width:64px; height:27px; background:url(../images/L_btn0615.jpg) no-repeat -4px -6px; display:inline-block; text-align:center; line-height:25px; vertical-align:middle;} 
.L_user .mailspage .mail .markbtn a:hover{ background-position:-4px -37px;} 
.L_user .mailspage .mail .firsttr{ background:#F9F9F9; border-bottom:1px solid #DDDDDD;border-top:1px solid #DDDDDD; height:20px; line-height:20px;}</style> 
</head> <body> 
<div class="L_user clear-fix"> 
<div class="mailspage"> 
<div class="loantab"><a href="javascript:void(0)" class="c">收件箱</a><a href="javascript:void(0)">已发送</a><a href="javascript:void(0)">发信息</a></div> 
<div class="mail"> 
<p class="markbtn"><a href="javascript:void(0)" class="deletebtn">删除</a><a href="javascript:void(0)">标记已读</a><a href="javascript:void(0)">标记未读</a></p> 
<div class="table_box"> 
<table> 
<tr id="titletr"> 
<td class="firsttr"><input type="checkbox" id="allcheckbox" /></td> 
<td class="firsttr"><img src="images/L_mail.png" /></td> 
<td class="firsttr">发件人</td> 
<td class="firsttr">标题</td> 
<td class="firsttr">发送时间</td> 
</tr> 
<tr> 
<td><input type="checkbox" /></td> 
<td>3</td> 
<td>XXX</td> 
<td>XXX</td> 
<td>XXX</td> 
</tr> 
<tr> 
<td><input type="checkbox" /></td> 
<td>3</td> 
<td>XXX</td> 
<td>XXX</td> 
<td>XXX</td> 
</tr> 
<tr> 
<td><input type="checkbox" /></td> 
<td>3</td> 
<td>XXX</td> 
<td>XXX</td> 
<td>XXX</td> 
</tr> 
</table> 
<p class="page">共0条<a href="javascript:void(0)">首页</a><a href="javascript:void(0)">上一页</a><a href="javascript:void(0)">下一页</a><a href="javascript:void(0)">尾页</a></p> 
</div> 
</div> 
</div> 
</div>

<script type="text/javascript">//删除选中: 
$(".markbtn .deletebtn").click(function(){ 
$(".table_box tr").each(function(){ 
if($(this).find("input").attr("checked")&&$(this).index()!=0){ 
$(this).remove(); 
} 
}) 
}) 
$("#allcheckbox").click(function(){ 
if($(this).attr("checked")){ 
$(".table_box td input").attr("checked","checked"); 
}else{ 
$(".table_box td input").attr("checked","") 
} 
}) $(".table_box input").not("#allcheckbox").click(function(){ 
$(".table_box input").not("#allcheckbox").each(function(){ 
if($(".table_box input[type='checkbox']:checked").not("#allcheckbox").length==$(".table_box tr").not("#titletr").length){ 
$("#allcheckbox").attr("checked","checked"); 
}else{ 
$("#allcheckbox").attr("checked",""); 
} 
}) 
})</script> 
</body> 
</html>
Javascript 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
如何让页面加载完成后执行js
Jun 26 #Javascript
文件编码导致jquery失效的解决方法
Jun 26 #Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 #Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 #Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 #Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 #Javascript
解析jquery获取父窗口的元素
Jun 26 #Javascript
You might like
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
编辑浪子版表单验证类
2007/05/12 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python选择排序算法实例总结
2015/07/01 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
奥巴马演讲稿
2014/01/08 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
教学质量月活动总结
2015/05/11 职场文书
怎样写观后感
2015/06/19 职场文书
学风建设主题班会
2015/08/17 职场文书
python实现简单区块链结构
2021/04/25 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers