页面head部分需要先引入jQuery库，接着引入CSS样式文件和其他的JS文件，并定义一些全局变量，代码如下：

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<!-- ionic框架  css -->
<link type="text/css" rel="stylesheet" href="css/weixin.css" />
<link type="text/css" rel="stylesheet" href="css/ionic.min.css" />
<link type="text/css" rel="stylesheet" href="css/signin.css" />
<link type="text/css" rel="stylesheet" href="css/share.css" />
<!-- ionic框架  js   -->
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
<script type="text/javascript" src="js/runend.js"></script>
<script type="text/javascript">
//定义全局变量
var i=0;

//金额总和
var money=0;

//计算合计价格
var cart_money=new Object();

//全部商品ID
var cart_id=new Object();
//备份商品ID，用于全选后去掉全选又再次全选
var cart_id_copy=new Object();

</script>

页面的body部分，重点是讲所有商品放在一个form表单里面，结构不算复杂，代码如下：

<form  method="post"  name="cart_form" target="_self" id="cart_form" action="">
		<!--list-->
		<div class="commodity_list_box">
			<div class="cart_top">
			<span>商品清单</span>
			<p id="weights">总重量约25kg</p>
			<div class="clear"></div>
		</div>
		<!--商品列表-->
		<div class="commodity_box">
			<div class="commodity_list">
				<!--店名信息-->
				<div class="tite_tim select">
					<em aem="1" cart_id="84"></em>
					<span>momo</span>
					<div class="clear"></div>
				</div>
				<!--商品-->
				<ul class="commodity_list_term">
					<li class="select">
						<em aem="0" cart_id="84"></em>
						<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
						<div class="div_center">
							<h4>新疆苹果</h4>
							<span>50斤</span>
							<p class="now_value"><i>￥</i><b class="qu_su">120.00</b></p>
						</div>
						<div class="div_right">
							<i onclick="reducew(this)">-</i>
							<span class="zi">1</span>
							<input type="hidden" value="84">
							<i onclick="plusw(this)">+</i>
						</div>
					</li>
					<li class="select">
						<em aem="0" cart_id="84"></em>
						<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
						<div class="div_center">
							<h4>新疆苹果</h4>
							<span>50斤</span>
							<p class="now_value"><i>￥</i><b class="qu_su">10.00</b></p>
						</div>
						<div class="div_right">
							<i onclick="reducew(this)">-</i>
							<span class="zi">1</span>
							<input type="hidden" value="84">
							<i onclick="plusw(this)">+</i>
						</div>
					</li>
				</ul>
				<!--优惠信息-->
				<div class="shop_ul_bottom account_info_box">
					<ul class="account_info">
					
						<li class="i_text">
							<span class="info_name xi_cu">包邮</span>
							<span class="info_name">商家包邮</span>
						</li>
												
					</ul>
				</div>
			</div>
		</div>
		<div class="commodity_box">
			<div class="commodity_list">
				<!--店名信息-->
				<div class="tite_tim select">
					<em aem="1" cart_id="84"></em>
					<span>momo</span>
					<div class="clear"></div>
				</div>
				<!--商品-->
				<ul class="commodity_list_term">
					<li class="select">
						<em aem="0" cart_id="84"></em>
						<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
						<div class="div_center">
							<h4>新疆苹果</h4>
							<span>50斤</span>
							<p class="now_value"><i>￥</i><b class="qu_su">160.00</b></p>
						</div>
						<div class="div_right">
							<i onclick="reducew(this)">-</i>
							<span class="zi">1</span>
							<input type="hidden" value="84">
							<i onclick="plusw(this)">+</i>
						</div>
					</li>
					<li class="select">
						<em aem="0" cart_id="84"></em>
						<img src="images/33d332dbca4e027fbc270db34a1a915d.png" />
						<div class="div_center">
							<h4>新疆苹果</h4>
							<span>50斤</span>
							<p class="now_value"><i>￥</i><b class="qu_su">20.00</b></p>
						</div>
						<div class="div_right">
							<i onclick="reducew(this)">-</i>
							<span class="zi">1</span>
							<input type="hidden" value="84">
							<i onclick="plusw(this)">+</i>
						</div>
					</li>
				</ul>
				<!--优惠信息-->
				<div class="shop_ul_bottom account_info_box">
					<ul class="account_info">
					
						<li class="i_text">
							<span class="info_name xi_cu">包邮</span>
							<span class="info_name">商家包邮</span>
						</li>
												
					</ul>
				</div>
			</div>
		</div>
		<!-- 商品列表 end -->
	</div>
	<!-- end -->

	<!-- footer -->
	<div style="height:55px;"></div>
	<div class="settle_box">
    	<dl class="all_check select">
        	<dt><span id="all_pitch_on"></span><em>全选</em></dt>
        </dl>
        <dl class="total_amount">
        	<dt>合计：<p id="total_price">¥<b>0</b></p></dt>
            <dd>不含运费</dd>
        </dl>
        <input type="hidden" name="gcs" id="gcs" />
        <a class="settle_btn" href="javascript:void(0);" id="confirm_cart">结算</a>
        <a class="settle_btn" href="javascript:void(0);" id="confirm_cart1" onclick="big_cart_remove()">删除</a>
    </div>
    <!-- end -->
</form>

页面的底部需要对商品的增减、价格变化等事件进行响应，部分代码如下：

//选择结算商品

$(".select em").click(function(){
	var su = $(this).attr("aem");
	var carts_id=$(this).attr("cart_id");
	var totalH = $("#total_price b").text(); /* 合计金额  */
	if(su == 0){
		/* 单选商品  */
		if($(this).hasClass("pitch_on")){
			/*去该店全选*/
			$(this).parents("ul").siblings(".select").find("em").removeClass("pitch_on");
			/*去底部全选*/
			$("#all_pitch_on").removeClass("pitch_on");
			$(this).removeClass("pitch_on");
			reduceMod($(this),totalH);
			cart_id[carts_id]="";
			delete cart_id[carts_id];
		}else{
			$(this).addClass("pitch_on");
			var n = $(this).parents("ul").children().find(".pitch_on");
			var n1 = $(this).parents("ul").children();
			plusMod($(this),totalH,0,noX);
			cart_id[carts_id]="";
			/*该店商品全选中时*/
			if(n.length == n1.length){
				$(this).parents("ul").siblings(".select").find("em").addClass("pitch_on");
			}
			/*商品全部选中时*/
			var fot = $(".commodity_list_box .tite_tim .pitch_on");
			var fot1 = $(".commodity_list_box .tite_tim em");
			if(fot.length == fot1.length)
			$("#all_pitch_on").addClass("pitch_on");
		}
	}else{
		/* 全选该店铺  */
		if($(this).hasClass("pitch_on")){
			/*去底部全选*/
			$("#all_pitch_on").removeClass("pitch_on");
			$(this).removeClass("pitch_on");
			
			commodityReduceMod($(this),totalH);
			$(this).parent().siblings("ul").find("em").removeClass("pitch_on");
			delete cart_id[carts_id];
		}else{
			commodityReduceMod($(this),totalH);

			$(this).addClass("pitch_on");
			
			$(this).parent().siblings("ul").find("em").addClass("pitch_on");
			
			if(plus != NaN && plus != undefined){
				totalH = parseFloat(totalH)-parseFloat(plus);
			}
			
			commodityPlusMod($(this),totalH);
		cart_id[carts_id]="";
		/*商品全部选中时*/
			var fot = $(".commodity_list_box .tite_tim .pitch_on");
			var fot1 = $(".commodity_list_box .tite_tim em");
			if(fot.length == fot1.length)
			$("#all_pitch_on").addClass("pitch_on");
			
		}
	}
	
	//计算选择数值
	number();
	
});