Heim > Artikel > Web-Frontend > jQuery实现类似淘宝购物车全选状态示例_jquery

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

PHP中文网Original: 2016-05-16 17:31:171134Durchsuche

今天写了个类似淘宝购物车全选状态，看下截图，效果还不错吧，具体的实现html及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 p{margin:0 0 10px 40px;} 
.L_user .mailspage .sendmsm p label{ width:50px; text-align:right; display:inline-block; vertical-align:middle;
margin-right:5px;} 
.L_user .mailspage .sendmsm p 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 p textarea{ width:270px; height:130px; vertical-align:top;border:1px solid #ccc; 
padding:5px; border-radius:5px;} 
.L_user .mailspage .sendmsm p 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 p 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> 
<p class="L_user clear-fix"> 
<p class="mailspage"> 
<p class="loantab"><a href="javascript:void(0)" class="c">收件箱</a>
<a href="javascript:void(0)">已发送</a><a href="javascript:void(0)">发信息</a></p> 
<p 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> 
<p 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> 
</p> 
</p> 
</p> 
</p>

复制代码代码如下:

<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=&#39;checkbox&#39;]:checked").not("#allcheckbox").length==$(".table_box tr")
.not("#titletr").length){ 
$("#allcheckbox").attr("checked","checked"); 
}else{ 
$("#allcheckbox").attr("checked",""); 
} 
}) 
})</script> 
</body> 
</html>

以上就是jQuery实现类似淘宝购物车全选状态示例_jquery的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery对dom的操作常用方法整理_jqueryNächster Artikel：Extjs单独定义各组件的实例代码_extjs

In Verbindung stehende Artikel

Mehr sehen