後臺資料控制前端checkbox(是否選中)
阿新 • • 發佈:2019-02-20
網上有很多關於前端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、前臺編寫非同步方法
注:var str = data.checkboxlist+'',這裡我在做這塊的時候頁面一直報 split not a function錯誤,加了這個單引號,就不會有這個問題了。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); }); } }); };
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值全部是由後臺傳進來的