jQuery 操作checkbox翻頁儲存選中狀態

js:

$(function() {	
 var prodSelectedNames = $("#hiddenProductNames");
 var prodSelectedIds = $("#hiddenProductIds");
	if(prodSelectedIds.val()!=""){
	var oldSelected = prodSelectedIds.val().split(',');
	$('input:checkbox[name=ids]').each(function() {
		if ($.inArray($(this).val(), oldSelected) != -1)
			this.checked = true;
	});
	}

	$('input:checkbox[name=ids]').click(function() {	
	 if(prodSelectedIds.val()!="" ){
		 var prodIdsValues = prodSelectedIds.val().split(',');
		 var prodNameValues=prodSelectedNames.val().split(',');
		 var i = $.inArray($(this).val(), prodIdsValues);
		 if (this.checked) {
			if (i == -1){
				prodIdsValues.push($(this).val());
				prodNameValues.push($(this).attr("productName"));
				}
		} else {
		if (i != -1) {
		prodIdsValues.splice(i, 1);
		prodNameValues.splice(i, 1);
			}
		}
		prodSelectedNames.val(prodNameValues);
		prodSelectedIds.val(prodIdsValues);
	}else if(prodSelectedIds.val()=="" && this.checked){
	    prodSelectedIds.val($(this).val());
	    prodSelectedNames.val($(this).attr("productName"));
	    }	
	});

    $('#queryName').bind('keypress',function(event){
            if(event.keyCode == "13") {
         return false;
            }
        });
})

function addProduct() {
    saveChangeProd();
    $("#productNames").val($("#hiddenProductNames").val());
	$("#productIds").val($("#hiddenProductIds").val());
	$("#contain").empty();
	closeDialog('contain'); 
}

// function clearProduct(){
//  $("#productDiv input[name='ids']").attr("checked",false);
// }

 function _gotoPage(pageNo) {
    saveChangeProd();
 	var queryName=$("#queryName").val();
 	var pageNo=pageNo;
 	showProduct(queryName,pageNo);	
	
 }


 function saveChangeProd(){
  var prodSelectedNames = $("#hiddenProductNames");
  var prodSelectedIds = $("#hiddenProductIds");
  	 $("#productDiv input[name='ids']").each(function(i,ele){
 	 if(prodSelectedIds.val()!="" ){
		 var prodIdsValues = prodSelectedIds.val().split(',');
		 var prodNameValues=prodSelectedNames.val().split(',');
		 var i = $.inArray($(this).val(), prodIdsValues);
		 if (this.checked) {
			if (i == -1){
				prodIdsValues.push($(this).val());
				prodNameValues.push($(this).attr("productName"));
				}
		} else {
		if (i != -1) {
		prodIdsValues.splice(i, 1);
		prodNameValues.splice(i, 1);
			}
		}
		prodSelectedNames.val(prodNameValues);
		prodSelectedIds.val(prodIdsValues);
	}else if(prodSelectedIds.val()=="" && this.checked){
	    prodSelectedIds.val($(this).val());
	    prodSelectedNames.val($(this).attr("productName"));
	    }	
	    });
 }

html

<div id="productDiv">
<form action="v_product_list.do" method="post" style="padding-top:5px;">
<@s.m "cmsProduct.name"/>:
 <input type="text" name="queryName" id="queryName" value="${queryName!}" style="width:150px" />
 <input class="query" type="button" id="queryButton" value="<@s.m "global.query"/>" οnclick="_gotoPage($('#_goPs').val());"/>
 <input type="hidden" name="pageNo" value="${pageNo!}" id="pageNo"/>
</form>
<@p.table value=productList;cmsProduct,i,has_next><#rt/>
	<@p.column align="center" width="20%" title="<input type='checkbox' οnclick='Pn.checkbox(\"ids\",this.checked)'/>" width="30%">
		<input type='checkbox' name='ids' value='${(cmsProduct.id)}' productName="${(cmsProduct.name)!}"/><#t/>
	</@p.column><#t/>
	<@p.column code="產品名稱" width="40%" align="center">${cmsProduct.name!}</@p.column><#t/>   
	<@p.column code="圖片" width="40%" align="center">
	<img id="preImg1" src="${(cmsProduct.productImg)!}" alt="預覽" style="width:100px;height:70px;background-color:#CCCCCC;border:1px solid #333">
	</@p.column><#t/>   
</@p.table>

<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="center" class="pn-sp">
	共 ${pagination.totalCount} 條
	每頁<input type="text" value="${pagination.pageSize}" style="width:30px" οnfοcus="this.select();" οnblur="$.cookie('_cookie_page_size',this.value,{expires:3650});" οnkeypress="if(event.keyCode==13){$(this).blur();return false;}"/>條
	<input class="first-page" type="button" value="首 頁" οnclick="_gotoPage('1');"<#if pagination.firstPage> disabled="disabled"</#if>/>
	<input class="pre-page" type="button" value="上一頁" οnclick="_gotoPage('${pagination.prePage}');"<#if pagination.firstPage> disabled="disabled"</#if>/>
	<input class="next-page" type="button" value="下一頁" οnclick="_gotoPage('${pagination.nextPage}');"<#if pagination.lastPage> disabled="disabled"</#if>/>
	<input class="last-page" type="button" value="尾 頁" οnclick="_gotoPage('${pagination.totalPage}');"<#if pagination.lastPage> disabled="disabled"</#if>/>
	當前 ${pagination.pageNo}/${pagination.totalPage} 頁 轉到第<input type="text" id="_goPs" style="width:50px" οnfοcus="this.select();" οnkeypress="if(event.keyCode==13){$('#_goPage').click();return false;}"/>頁
	<input class="go" id="_goPage" type="button" value="轉" οnclick="_gotoPage($('#_goPs').val());"<#if pagination.totalPage==1> disabled="disabled"</#if>/>
</td></tr></table>
<p></p>
<div style="text-align:center;">
	<input type="button" class="button" value="確定" οnclick="addProduct();"/>  
    <input type="button" class="button" class="button" value="取消" οnclick="closeDialog('contain')"/>
<!--     <input type="button" value="清除" οnclick="clearProduct()"/> -->
    </div>
</div>

java:對比修改前和修改後的資料然後儲存新增資料

public void updateCompanyProduct(CmsCompany cmsCompany,String prodIds){
		Integer id = cmsCompany.getId();
		List<Integer> oldProd=dao.findProdIds(id);
		List<Integer> newProd= new ArrayList<Integer>();
		List<Integer> copyProd= new ArrayList<Integer>();
		if(StringUtils.isNotBlank(prodIds)){
			for (String proId : prodIds.split(",")) {
				newProd.add(Integer.valueOf(proId));
				copyProd.add(Integer.valueOf(proId));
			}
		}
		copyProd.retainAll(oldProd);
		//System.out.println(copyProd);
		newProd.removeAll(copyProd);
		oldProd.removeAll(copyProd);
		for (Integer prodId : oldProd) {
			dao.deleteCompanyProduct(id,prodId);

		}
		for (Integer prodId : newProd) {
			dao.saveCompanyProduct(prodId,id);
		}
		
	}