checkbox選擇根據后台List數據進行回顯

需求：記住用戶已經選擇的 checkbox 選項，當用戶再次對該 checkbox 進行選擇操作時，應對該用戶已經選擇的 checkbox 選項進行選中操作。

示例代碼：

 

1.  
2.  
3. checkbox,js遍歷后台 list
4.  
5. $( "#merchantSubclass").show();
6. var j = 0;
7. var merchantCategoryList = "${merchantCategoryList}";
8. var merchantCategoryListTh = "${fn:length(merchantCategoryList)}";
9.  
10. var array = new Array();
11. <c: forEach items="${merchantCategoryList}" var="item">
12. array.push("${item}");
13. </c: forEach>
14.  
15. for (var i = 0; i < data.length; i++) {
16. var checked="";
17. for(var k=0;k<array.length;k++){
18. if(data[i].id==array[k]) {
19. checked= "checked='checked'";
20. }
21. }
22. $( "#merchantTypeSubclass").append("<div class='merchantTxt' style='width:140px;float: left;'>"+
23. "<input type='checkbox' name='merchantTypes' value='"+data[i].id+"' "
24. +checked+ " class='merchantTypes'>"+
25. data[i].typeName+ "  </div>");
26. j++;
27. if(j==5){
28. $( "#merchantTypeSubclass").append("<span class='merchantTxt'><br/></span>");
29. j= 0;
30. }
31. }
32.  
33.  
34.  

圖解：

 

難點：js 中無法遍歷 List 集合，所以只能先把數組轉換到 Array 數組，再進行循環遍歷。 

js 遍歷 List 會有這樣的問題：

 

1.  
2.  
3. <script type="text/javascript" language="javascript">
4. <!--
5.  
6. //后台servlet中已經向request中set了一個List集合對象,名為mulst
7.  
8. //在js中使用fn標簽和EL表達式獲得mulst List集合對象的長度
9. var mulength = '${fn:length(mulst)}';
10.  
11. //遍歷節點數組
12. for(var i = 0;i<mulength;i++)
13. {
14. alert( '${mulst[i]}');//在這發生了問題,我想在js中要循環取出List中的集合中的數據,但是這樣取不出來
15.  
16. //如果使用alert('${mulst[0]}');//這樣可以獲得List中第一條數據.
17. }
18. //-->
19. </script>
20. <script>
21. <c:forEach var="obj" items="${mulst} ">
22. alert( "${obj.屬性}");
23. </c:forEach>
24. </script>
25.  
26.  

參考文章：

 

http://blog.csdn.net/XiaoKanZheShiJie/article/details/47280449

http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html