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='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

原文地址:https://www.cnblogs.com/zhuyeshen/p/11419421.html