今天寫了個類似淘寶購物車全選狀態
看下截圖
效果還不錯吧
具體的實現html及jQuery代碼如下
感興趣的朋友可以參考下哈
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN" "
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>我是投資者</title>
<script type="text/javascript" src="
<style type="text/css">*{margin:
;padding:
;color:#
;font
size:
px; outline:none;}
table{ border
collapse:collapse; border
spacing:
; }
a{color:#
A
A
A; text
decoration:none; color:#
;}
a:hover{ text
decoration:none;}
L_user
mailspage{ background:#fff;}
L_user
mailspage
mail{padding
bottom:
px;}
L_user
mailspage
mail p{margin:
px
px
px; padding
top:
px;}
L_user
mailspage
mail table{width:
px; text
align:center;}
L_user
mailspage
mail
table_box{ width:
px;border:
px solid #DDDDDD;margin:
px
px;}
L_user
mailspage
mail
firsttr{border
top:none;}
L_user
mailspage
mail td{ height:
px; line
height:
px;}
L_user
mailspage
sendmsm {margin
top:
px;}
L_user
mailspage
sendmsm div{margin:
px
px;}
L_user
mailspage
sendmsm div label{ width:
px; text
align:right; display:inline
block; vertical
align:middle;margin
right:
px;}
L_user
mailspage
sendmsm div input{margin
right:
px; border:
px solid #ccc; height:
px; line
height:
px; padding
left:
px; vertical
align:middle; border
radius:
px;}
L_user
mailspage
sendmsm div textarea{ width:
px; height:
px; vertical
align:top;border:
px solid #ccc; padding:
px; border
radius:
px;}
L_user
mailspage
sendmsm div a{width:
px; height:
px; display:inline
block; background:url(
/images/L_btn
jpg) no
repeat
px
px; vertical
align:middle;margin
right:
px;}
L_user
mailspage
sendmsm div a:hover{ background
position:
px
px;}
L_user
mailspage{width:
px; border:
px solid #E
E
E
; float:left; overflow:hidden;}
L_user
mailspage
loantab{background:#fff;border
bottom:
px solid #E
E
E
; }
L_user
mailspage
loantab a{width:
px; height:
px; border:
px solid #E
E
E
; border
bottom:none;display:inline
block; text
align:center; border
left:none; border
top:none; line
height:
px; color:#
; font
weight:bold; }
L_user
mailspage
loantab a
c{ background:#F
F
F
; color:#CF
C;}
L_user
mailspage
mail
markbtn a{ width:
px; height:
px; background:url(
/images/L_btn
jpg) no
repeat
px
px; display:inline
block; text
align:center; line
height:
px; vertical
align:middle;}
L_user
mailspage
mail
markbtn a:hover{ background
position:
px
px;}
L_user
mailspage
mail
firsttr{ background:#F
F
F
; border
bottom:
px solid #DDDDDD;border
top:
px solid #DDDDDD; height:
px; line
height:
px;}</style>
</head>
<body>
<div class="L_user clear
fix">
<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_mail
png" /></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
