熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery實現類似淘寶購物車全選狀態示例

2013-11-15 12:16:37  來源: JSP教程 
今天寫了個類似淘寶購物車全選狀態看下截圖效果還不錯吧具體的實現html及jQuery代碼如下感興趣的朋友可以參考下哈  

  jQuery實現類似淘寶購物車全選狀態示例

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>我是投資者</title>
<script type="text/javascript" src="
<style type="text/css">*{margin:;padding:;color:#;fontsize:px; outline:none;}
table{ bordercollapse:collapse; borderspacing:; }
a{color:#AAA; textdecoration:none; color:#;}
a:hover{ textdecoration:none;}
L_user mailspage{ background:#fff;}
L_user mailspage mail{paddingbottom:px;}
L_user mailspage mail p{margin:px px px; paddingtop:px;}
L_user mailspage mail table{width:px; textalign:center;}
L_user mailspage mail table_box{ width:px;border:px solid #DDDDDD;margin: px px;}
L_user mailspage mail firsttr{bordertop:none;}
L_user mailspage mail td{ height:px; lineheight:px;}
L_user mailspage sendmsm {margintop:px;}
L_user mailspage sendmsm div{margin: px px;}
L_user mailspage sendmsm div label{ width:px; textalign:right; display:inlineblock; verticalalign:middle;marginright:px;}
L_user mailspage sendmsm div input{marginright:px; border:px solid #ccc; height:px; lineheight:px; paddingleft:px; verticalalign:middle; borderradius:px;}
L_user mailspage sendmsm div textarea{ width:px; height:px; verticalalign:top;border:px solid #ccc; padding:px; borderradius:px;}
L_user mailspage sendmsm div a{width:px; height:px; display:inlineblock; background:url(/images/L_btnjpg) norepeat px px; verticalalign:middle;marginright:px;}
L_user mailspage sendmsm div a:hover{ backgroundposition:px px;}
L_user mailspage{width:px; border:px solid #EEE; float:left; overflow:hidden;}
L_user mailspage loantab{background:#fff;borderbottom:px solid #EEE; }
L_user mailspage loantab a{width:px; height:px; border:px solid #EEE; borderbottom:none;display:inlineblock; textalign:center; borderleft:none; bordertop:none; lineheight:px; color:#; fontweight:bold; }
L_user mailspage loantab ac{ background:#FFF; color:#CFC;}
L_user mailspage mail markbtn a{ width:px; height:px; background:url(/images/L_btnjpg) norepeat px px; display:inlineblock; textalign:center; lineheight:px; verticalalign:middle;}
L_user mailspage mail markbtn a:hover{ backgroundposition:px px;}
L_user mailspage mail firsttr{ background:#FFF; borderbottom:px solid #DDDDDD;bordertop:px solid #DDDDDD; height:px; lineheight:px;}</style>
</head>

<body>

<div class="L_user clearfix">

<div class="mailspage">
<div class="loantab"><a href="javascript:void()" class="c">收件箱</a><a href="javascript:void()">已發送</a><a href="javascript:void()">發信息</a></div>
<div class="mail">
<p class="markbtn"><a href="javascript:void()" class="deletebtn">刪除</a><a href="javascript:void()">標記已讀</a><a href="javascript:void()">標記未讀</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_mailpng" /></td>
<td class="firsttr">發件人</td>
<td class="firsttr">標題</td>
<td class="firsttr">發送時間</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td></td>
<td>XXX</td>
<td>XXX</td>
<td>XXX</td>
</tr>
</table>
<p class="page">共條<a href="javascript:void()">首頁</a><a href="javascript:void()">上一頁</a><a href="javascript:void()">下一頁</a><a href="javascript:void()">尾頁</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()!=){
$(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>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20625.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.