1. 程式人生 > >後臺資料控制前端checkbox(是否選中)

後臺資料控制前端checkbox(是否選中)

網上有很多關於前端checkbox資料怎樣傳送給後臺(action)的例項,但是很少有通過後臺數據來控制前端checkbox的是否選中的例子,最近專案中就碰到這個問題

解決辦法:

1、後臺編寫非同步方法,獲取value集合

    public String returnCheckbox(){
        //獲取value集合
        List<Integer> checklauser = serclassService.selectlsidBycid(cid);
        JSONObject json = new JSONObject();
        //放進json中
        json.put("checkboxlist", checklauser.toString());
        //將json返回到也main
        returnJson(json.toString());
        return "jsonresult";
    }

2、前臺編寫非同步方法
function getCheckbox(cid){
	 $.ajax({
         type: "post",
         url: "classification!returnCheckbox.action?cid="+cid,
         async:true,
         dataType: "json",
         success: function(data){
        	 //這個地方搞了好久,用split()頁面上報split is not a function錯誤
        	 //後面在國外的網站上建議 在字串後面加 +'',然後問題就解決了 @zhangll
        	 var str = data.checkboxlist+'';
        	 //非同步獲取選中記錄中包含的lsid分類集合,遍歷集合,如果集合中的值與checkbox的value值相同,則選中
        	 $(str.split(",")).each(function (i,dom){
        		 $(":checkbox[value='"+dom+"']").prop("checked",true);
        	 });
         }
	 });
 }; 
注:var str =  data.checkboxlist+'',這裡我在做這塊的時候頁面一直報 split not a function錯誤,加了這個單引號,就不會有這個問題了。

3、編寫 jsp頁面,這裡的checkbox我是從後臺的list中遍歷出來的

                        <label id="label">
				服務範圍
			</label>
			<c:forEach var="lauserVo" items="${listlauserVo}" varStatus="status">
				<input type="checkbox" name="checklauser" value="${lauserVo.lsid}" />${lauserVo.lsname} 
   					<!--下面c:if標籤可以控制每四個checkbox換行-->
					<c:if test="${status.count % 4 == 0}">
						<br/>
					</c:if>
			</c:forEach>

效果如下,勾選的value值全部是由後臺傳進來的