java web开发_多拿网/淘宝网购物车选择操作

看看标题，我想大家会觉得有一点云里雾里的感觉，不要慌张，先来看看一些实例。

多拿网购物车全选情况：



在购物车中取消一个：



取消商家选项：



只选择一个商家情况：



下面是淘宝网的购物车：



看来这些，大家知道我要说啥了吧...

===========================================================

代码部分:

===========================================================

显示页面：

<h1 class="userTitle w1000 auto mb20 tl">
<strong class="userTitle_strong fl f18 white fb yh t1">我的购物车</strong>
<span></span>
</h1>
<div class="w1000 auto tl buyCar oh pb50">
<dl class="oh ml30 mt30 mr30 buyCar_steps">
<dd class="fl">
<ul class="buyCar_steps_ul f16">
<li class="fl white buyCar_steps_ul_finished pl10 pr30 pr">1.我的购物车<em class="pa"></em><span class="pa"></span></li>
<li class="fl pl50 pr30 buyCar_steps_ul_unfinished pr">2.确认订单信息<em class="pa"></em><span class="pa"></span></li>
<li class="fl pl50 pr30">3.成功提交订单</li>
</ul>
</dd>
<dd class="fr">
<a href="javascript:void(0)" onclick="keepingShopping();" class="red f14">返回 >></a>
</dd>
</dl>
<table class="ml30 mt30 mr30 buyCar_data yh">
<thead class="f14 fb gray">
<tr>
<th class="pb10 w50 pr30">
<input type="checkbox" id="check_all_top" value="-1" checked="checked"/>
<span class="pl5">全选</span>
</th>
<th class="pb10">优惠券名称</th>
<th class="pb10">未消费退款支持</th>
<th class="pb10">原价(元)</th>
<th class="pb10">购买价(元)</th>
<th class="pb10">数量</th>
<th class="pb10">小计(元)</th>
<th class="pb10">操作</th>
</tr>
</thead>
<!-- 节省值 -->
<c:set var="total" value="0"/>
<!-- 支付值 -->
<c:set var="pay" value="0"/>
<c:forEach items="${qr}" var="map">
<tbody class="f14 pb10" id="business_bar_${map.key.id }">
<tr>
<td colspan="7" class="pt10 pb10 f14">
<input type="checkbox" id="check_all_business_${map.key.id}" onclick="check_business_all('${map.key.id }');" name="myBusiness" value="-1" checked="checked"/>
<span class="pl5">商家：</span><a href="${pageContext.request.contextPath}${map.key.businessIntroduceUI}" class="red">${map.key.name }</a></td>
</tr>
<c:set var="cashticket_number_for_business" value="0"/>
<c:forEach items="${map.value }" var="cashTicket">
<tr class="buyCar_data_tiket t2" id="cashTicket_${cashTicket.id}">
<td><input type="checkbox" id="check_cashticket_${cashTicket.id }" onclick="check_cashticket('${cashTicket.id }','${map.key.id }');" value="${cashTicket.id }" checked="checked"/></td>
<td><a href="${pageContext.request.contextPath}${cashTicket.cashCouponIntroduceUI}" class="buyCar_data_tiket_name">${cashTicket.title }</a></td>
<td>${cashTicket.ticketType.value }</td>
<td>￥${cashTicket.oldPrice }</td>
<td>￥${cashTicket.nowPrice }</td>
<td>
<a href="javascript:void(0)" onclick="subNumber('${cashTicket.id}','${cashTicket.oldPrice }','${cashTicket.nowPrice }','${cashTicket.number }','${cashTicket.amount }');" id="sub_number_${cashTicket.id }">-</a>
<input type="text" value="${cashTicket.number }" name="cashTicket.number" id="cashTicketNumber_${cashTicket.id }" class="w20"/>
<a href="javascript:void(0)" onclick="addNumber('${cashTicket.id}','${cashTicket.oldPrice }','${cashTicket.nowPrice }','${cashTicket.number }','${cashTicket.amount }');">+</a>
</td>
<td class="red" id="cashticket_sum_${cashTicket.id }">
￥${cashTicket.number*cashTicket.nowPrice }
</td>
<td class="f12">
<!-- <p><a href="javascript:void(0)" class="blue">移入收藏夹</a></p> -->
<p><a href="javascript:void(0)" onclick="delMyShoppingCart('${cashTicket.id}','${cashTicket.oldPrice }','${cashTicket.nowPrice }','${map.key.id }')" class="blue">删除</a></p>
</td>
</tr>
<!-- 节省值 -->
<c:set var="total" value="${total + (cashTicket.number*cashTicket.oldPrice) }"/>
<!-- 支付值 -->
<c:set var="pay" value="${pay + (cashTicket.number*cashTicket.nowPrice ) }"/>
<!--  -->
<c:set var="cashticket_number_for_business" value="${cashticket_number_for_business + 1 }"/>
</c:forEach>
</tbody>
<!-- 商家的现金券数目 -->
<input type="hidden" id="cashticket_number_for_business_${map.key.id }" value="${cashticket_number_for_business }"/>
</c:forEach>
<tfoot>
<tr>
<td colspan="7" class="oh pt10 pb10">
<p class="fl gray">
<input type="checkbox" id="check_all_foot" value="-1" checked="checked"/><span class="pl5 pr50">全选</span>
<a href="javascript:void(0)" id="del_checked" class="gray">批量删除</a>
</p>
<p class="fr f14">
<span>已节省:</span>
<input type="hidden" id="value_save" value="${total - pay }"/>
<strong class="red f16 fb pr20" id="show_value_save">￥${total - pay }</strong>
<span>您总共需要支付:</span>
<input type="hidden" id="value_pay" value="${pay }"/>
<strong class="red f16 fb pr20" id="show_value_pay">￥${pay }</strong>
</p>
</td>
</tr>
</tfoot>
</table>
<p class="tr mr30 mt30">
<input type="button" onclick="keepingShopping();" value="继续购物" class="pl10 pr10 pt5 pb5"/>
<input type="button" onclick="submitOrder();" value="提交订单" class="ml30 mr20 pl10 pr10 pt5 pb5"/>
</p>

</div>

下面是部分js代码：

/**
* 全选 by hongten(hongtenzone@foxmail.com)
*/
function selectAll() {
$("input:checkbox").attr("checked", "checked");
};

/**
* 全不选 by hongten(hongtenzone@foxmail.com)
*/
function selectNone() {
$("input:checkbox").removeAttr("checked");
};

/**
* 全选框选择事件
*/
$("#check_all_top").change(function() {
if ($("#check_all_top").attr("checked") == "checked") {
selectAll();
} else {
selectNone();
}
});

/**
* 全选框选择事件
*/
$("#check_all_foot").change(function() {
if ($("#check_all_foot").attr("checked") == "checked") {
selectAll();
} else {
selectNone();
}
});

/**
* 商家全选框
*
* @date 2012-12-29
* @author hongten(hongtenzone@foxmail.com)
*
* @param id
*/
function check_business_all(id) {
if (id == null || id == "") {
alert("id不能为空");
} else {
if($("#check_all_business_"+id).attr("checked") == "checked"){
$("#business_bar_"+id+" :checkbox").each(function(i) {
$(this).attr("checked","checked");
});
}else{
$("#business_bar_"+id+" :checkbox").each(function(i) {
$(this).attr("checked",false);
});
}
var flag = false;

$("input[name='myBusiness']").each(function(i) {
if($(this).attr("checked") == "checked"){
flag = true;
}else{
flag = false;
return false;
}
});

if(flag){
$("#check_all_top").attr("checked","checked");
$("#check_all_foot").attr("checked","checked");
}else{
$("#check_all_top").attr("checked",false);
$("#check_all_foot").attr("checked",false);
}
}
};

/**
* 现金券全选框
*
* @date 2012-12-29
* @author hongten(hongtenzone@foxmail.com)
*
* @param id
*/
function check_cashticket(id, b_id) {
if (id == null || id == "" || b_id == null || b_id == "") {
alert("id不能为空");
} else {
var flag = false;
$("#business_bar_"+b_id+" tr[id] :checkbox").each(function(i) {
if($(this).attr("checked") == "checked"){
flag = true;
}else{
flag = false;
return false;
}
});
if(flag){
$("#check_all_business_"+b_id).attr("checked","checked");
}else{
$("#check_all_business_"+b_id).attr("checked",false);
}

//重新初始化flag
flag = false;

$("input[name='myBusiness']").each(function(i) {
if($(this).attr("checked") == "checked"){
flag = true;
}else{
flag = false;
return false;
}
});

if(flag){
$("#check_all_top").attr("checked","checked");
$("#check_all_foot").attr("checked","checked");
}else{
$("#check_all_top").attr("checked",false);
$("#check_all_foot").attr("checked",false);
}
}
};

当然，如果你有很好的方法，不凡大家一起讨论讨论.....

I'm Hongten