1. Page effect.

   when the select all button is checked and all check boxes in the table are checked, the total amount is calculated and the settlement button is valid. When the form check boxes are not all checked, the select all button is cancelled, and the settlement button is valid for calculating the amount on the form check box. When all the check boxes are not checked, the result button is invalid.

2. jsp code.

	<table width="95%" align="center" cellpadding="0" cellspacing="0">
			<tr align="center" bgcolor="#efeae5">
				<td align="left" width="50px">
					<input type="checkbox" id="selectAll" checked="checked"/><label for="selectAll">All election</label>
				</td>
				<td colspan="2">Trade name</td>
				<td>Unit Price</td>
				<td>Number</td>
				<td>Subtotal</td>
				<td>operation</td>
			</tr>

		<c:forEach items="${cartItemList }" var="cartItem">
			<tr align="center">
				<td align="left">
					<input value="${cartItem.cartItemId }" type="checkbox" name="checkboxBtn" checked="checked"/>
				</td>
				<td align="left" width="70px">
					<a class="linkImage" href="<c:url value='/jsps/book/desc.jsp'/>"><img border="0" width="54" align="top" src="<c:url value='${cartItem.book.image_b }'/>"/></a>
				</td>
				<td align="left" width="400px">
				    <a href="<c:url value='/jsps/book/desc.jsp'/>"><span>${cartItem.book.bname }</span></a>
				</td>
				<td><span>&yen;<span class="currPrice">${cartItem.book.currPrice }</span></span></td>
				<td>
					<a class="jian" id="${cartItem.cartItemId }Jian"></a>
					<input class="quantity" readonly="readonly" id="${cartItem.cartItemId }Quantity" type="text" value="${cartItem.quantity }"/>
					<a class="jia" id="${cartItem.cartItemId }Jia"></a>
				</td>
				<td width="100px">
					<span class="price_n">&yen;<span class="subTotal" id="${cartItem.cartItemId }SubTotal">${cartItem.subtotal }</span></span>
				</td>
				<td>
					<a href="/goods/CartItemServlet?method=batchDelete&cartItemIds=${cartItem.cartItemId }">delete</a>
				</td>
			</tr>
		</c:forEach>
	
			<tr>
				<td colspan="4" class="tdBatchDelete">
					<a href="javascript:batchDelete();">Batch deletion</a>
				</td>
				<td colspan="3" align="right" class="tdTotal">
					<span>Total:</span><span class="price_t">&yen;<span id="total"></span></span>
				</td>
			</tr>
			<tr>
				<td colspan="7" align="right">
					<a href="javascript:jiesuan();" id="jiesuan" class="jiesuan"></a>
				</td>
			</tr>
		</table>

3. JavaScript control form check box and settlement button.

$(function(){
	showTotal();//Total calculation
	
	/*
	 *	Add click event to all buttons
	 */
	 $("#selectAll").click(function(){
	 	/*
	 	 *	1，Get all selected status
	 	 */
	 	 var bool=$("#selectAll").attr("checked");
	 	/*
	 	 *	2，Synchronize the check boxes of all entries with the state of select all
	 	 */
	 	 setItemCheckBok(bool);
	 	/*
	 	 *	3，Synchronize settlement button with select all
	 	 */
	 	  setJieSuan(bool);
	 	/*
	 	 *	4，Recalculate totals
	 	 */
	 	 showTotal();
	 });
	 
	 /*
	  * Add a click event to the check boxes of all entries
	  */
	 $(":checkbox[name=checkboxBtn]").click(function(){
	 	var all=$(":checkbox[name=checkboxBtn]").length;//Number of all entries
	 	var select =$(":checkbox[name=checkboxBtn][checked=true]").length;//Get the number of all selected entries
	 	if(all == select){//All selected
	 		$("#selectAll").attr("checked",true); / / check the check all box
	 		setJieSuan(true);//Make settlement button effective
	 		
	 	}else if(select == 0){//None of them
			$("#SelectAll '). Attr ("checked", false); / / unselect all
			setJieSuan(false);//Disable the settlement button
			
	 	}else{
	 		$("#SelectAll '). Attr ("checked", false); / / unselect all
			setJieSuan(true);//Make settlement button effective
	 	}
	 	showTotal();//Recalculate totals
	 });
});

/*
 * Total calculation	
 */
function showTotal(){
	 var total=0;
	 /*
	 *	1，Get all the checked item check boxes and loop through them.
	 */
	 $(":checkbox[name=checkboxBtn][checked=true]").each(function(){
	 	//2. Get the value of the check box, i.e. cartItemId
	 	var id=$(this).val();
	 	//3. Find the subtotal through cartItemId to get its text
	 	var text=$("#" + id + "SubTotal").text();
	 	//4. Cumulative calculation
	 	total += Number(text);
	 	
	 });
	 //5. Display the total in the total element
	 $("#Total "). Text (round (total, 2)); / / the round() function reserves two decimal places for total.
}

/*
 *	Set check box buttons for all entries uniformly
 */
function setItemCheckBok(bool){
	$(":checkbox[name=checkboxBtn]").attr("checked",bool);
}

 /*
  * Settlement
  */
 function jiesuan(){
 	//1. Get the id of all the selected items and put it in the array
 	var cartItemIdArray=new Array();
 	 $(":checkbox[name=checkboxBtn][checked=true]").each(function(){
 	 	cartItemIdArray.push($(this).val());//Add the value of the check box to the array
 	 });
 	//2. Assign the value of the array toString() to the hidden value of cartItemIds in the form.
 	$("#cartItemIds").val(cartItemIdArray.toString());
 	//The value of the total is also saved in the form
 	$("#hiddenTotal").val($("#total").text());
 	//3. Submit this form
 	$("#jieSuanForm").submit();
 }