jquery实现的简单复选树，checkboxtree
jquery的实现方式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery treeview 的选中子目录，同时选中父目录，关联选择</title><meta http-equiv="content-type" content="text/html;charset=utf-8"><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><link type="text/css" href="css/css.css" rel="stylesheet" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">//wirted by qq:190988779 at 2010-1-5 9:52:08//可以配合jquery treeview使用效果很好。$(document).ready(function(){$(".content input[type='checkbox'][name='c']").click(function(){//子目录var c = $(this).parent().find("input");var b = $(this).attr('checked');c.each(function(){$(this).attr('checked',b);});var m = $(this).parent().parent('ul').find('input');var count = 0;m.each(function(){if($(this).attr('checked')){count++;}});//父目录var p = $(this).parents('li');//父目录p.each(function(){var o = $(this).find('input');if(count){o[0].checked = true;}else{o[0].checked = !o[0].checked;}});$(this).attr('checked',b);});});</script></head><body><div id="divMsg"> </div><div name="c" value=2 /><a href="#">2</a> </li><li><input type="checkbox" name="c" value=3 /><a href="#">3</a><ul name="c" value=6 /><a href="#">6</a></li><li><input type="checkbox" name="c" value=5 /><a href="#">5</a><ul name="c" value=111 /><a href="#">111</a></li><li><input type="checkbox" name="c" value=100 /><a href="#">100</a></li></ul></li></ul></li></ul><ul></ul></div></body></html>?<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>产品维度信息</title><% String path=request.getContextPath(); %><script language="javascript" src="<%=path%>/js/main.js"></script><script src="<%=path%>/js/dialog.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery1.4.2.min.js"></script> <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery-ui1.8.0.min.js"></script> <link rel="stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/demo.css"> <link rel="stylesheet" type="text/css" href="<%=path%>/js/checkboxtree/jquery.checkboxtree.css"> <script type="text/javascript" src="<%=path%>/js/checkboxtree/jquery.checkboxtree.js"></script><style type="text/css">body{margin:0px;padding:0px;font-size:12px;}#main{ margin-left:auto; margin-right:auto;}#wrapper{margin:0px auto;width:520px;margin:10px;height:auto;}</style><script type="text/javascript">var closeFun = function(){parent.dhtmlwindow.closeDialog({success:true,returnValue:''});};function submints() {theForm.submit();//window.location.target="mainFrame"closeFun();}function goback(){parent.dhtmlwindow.closeDialog({success:false,returnValue:''});}function select(sobj){$.ajax({ type: "POST", url: "<%=path%>/cotton/productExtSelect.action", data: "stringArg="+$(sobj).val(), dataType:"json", success: function(data){ $("input[name='list']").each(function(){ $(this).removeAttr("checked"); }); $.each(data,function(idx,item){ $("input[name='list']").each(function(){ if($(this).val()==item.codeIdAndCodeName) { $(this).attr("checked",'true'); } }); }); }}); }$(document).ready(function() { $('#tree').checkboxTree();});</script></head><body> <div id="wrapper"> <div id="main"> <form action="<%=path%>/cotton/productExtSave.action" method="post" name="theForm"> <div id="main_center"> <table align="center" > <tr> <td height="30" colspan="4" align="center">请 选 择 产 品 及 维 度 信 息</td> </tr> <tr> <td width="100" height="30" align="center">产品：</td> <td width="180" height="30"><div align="left"><strong> <s:select name="stringArg" list="productCodeList" headerKey="" headerValue="请选择" listKey="productCode" listValue="productPyAndName" theme="simple" onchange="javascript:select(this)"></s:select> </strong></div></td> </tr><tr> <td width="46" align="center" valign="middle">维度：</td> <td colspan="3" align="left"> <ul id="tree"> <s:iterator value="codeList" status="index" var="ccode"> <li> <input type="checkbox" name="list" value="<s:property value="codeIdAndCodeName"/>"/><s:property value="codeName"/> <s:if test="childList!=null"> <ul> <s:iterator value="childList" status="index2"> <li> <input type="checkbox" name="list" value="<s:property value="codeIdAndCodeName"/>"/><s:property value="codeName"/> </li> </s:iterator> </ul> </s:if> </li> </s:iterator> </ul> </td> </tr> </table> </div> <div style="text-align:center; margin-bottom:10px;"> <input type="button" onclick="submints();" name="btn_update" id="update" value="提交" /> <input type="button" onclick="goback();" name="btn_close" id="update" value="取消" /></div> </form> </div> </div></body></html>?
? ?服务端代码：
?
public void productExtSelect(){try {if(stringArg!=null){cproductExtExample.clear();cproductExtExample.createCriteria().andProductCodeEqualTo(stringArg);List<ProductExt> peList = cproductExtDao.selectByExample(cproductExtExample);JSONArray json = JSONArray.fromObject(peList);HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("application/json;charset=UTF-8");response.setCharacterEncoding("utf-8");response.setHeader("Charset", "utf-8");response.setHeader("Cache-Control", "no-cache");response.getWriter().println(json.toString());}} catch (Exception e) {e.printStackTrace();}}