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 DOM学习第八章 表单错误提示
Feb 19 Javascript
js select常用操作控制代码
Mar 16 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
js格式化时间小结
Nov 03 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
vue之数据交互实例代码
Jun 16 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
JavaScript forEach中return失效问题解决方案
Jun 01 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
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
offsetParent 算法分析
2010/04/05 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
Python实现的文本对比报告生成工具示例
2018/05/22 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python画环形图的方法
2020/03/25 Python
Python插件机制实现详解
2020/05/04 Python
python怎么对数字进行过滤
2020/07/05 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Django 实现图片上传和下载功能
2020/12/31 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
2014年元旦感言
2014/03/06 职场文书
党日活动总结
2014/05/07 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python