jquey复选框三级分类关联一二级分类

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Category_Manage_New_Two.aspx.cs"
    Inherits="Lilaidao.Admin.Weblogin.Category_Manage_New_Two" %>

<%@ Register Src="bottom.ascx" TagName="bottom" TagPrefix="V5" %>
主要代码如下
<!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 id="Head1" runat="server"> <title>商品分类管理</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> <link href="css/css_list.css" rel="stylesheet" type="text/css" /> <link href="css/control.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="js/Common.js"></script> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("input[name='Category1']").click(function () { var idvalue = $(this).val(); var check = this.checked; var idvalue2; var check2; $("input[name='Category2']").each(function (index, ele) { if ($(ele).attr("ParentId") == idvalue) { ele.checked = check; idvalue2 = $(ele).val(); check2 = ele.checked; $("input[name='Category3']").each(function (index, ele) { if ($(ele).attr("ParentId") == idvalue2) { ele.checked = check2; } }); } }); }) $("input[name='Category2']").click(function () { var parentId = $(this).attr("ParentId") //得到二级分类的父Id var check = this.checked; //二级分类的选中状态 $("input[name='Category1']").each(function (index, ele) { if ($(ele).val() == parentId) { var idvalue = $(this).val() //得到一级分类的id //var countOne = $("input[type='checkbox'][parentid='" + idvalue + "']").length //得到二级分类选择框总数 //得到二级分类选择的个数如果大于0 一级分类选中 var count = $("input[type='checkbox'][parentid='" + idvalue + "']:checked").length; count > 0 ? ele.checked = true : ele.checked = false; } }) idvalue2 = $(this).val(); //得到三级分类的父id check2 = this.checked; //二级分类的选中状态 $("input[name='Category3']").each(function (index, ele) { if ($(ele).attr("ParentId") == idvalue2) { ele.checked = check2; } }); }); $("input[name='Category3']").click(function () { var parentId = $(this).attr("ParentId") //得到三级分类的父Id var check = this.checked; //三级分类的选中状态 $("input[name='Category2']").each(function (index, ele) { if ($(ele).val() == parentId) { var idvalue = $(this).val() //得到二级分类的id //var countOne = $("input[type='checkbox'][parentid='" + idvalue + "']").length //得到二级分类选择框总数 //得到三级分类选择的个数如果大于0 二级分类选中 ,对应的一级分类也选中 var count = $("input[type='checkbox'][parentid='" + idvalue + "']:checked").length; // count > 0 ? ele.checked = true : ele.checked = false; if (count > 0) { ele.checked = true //选中二级分类 var id1 = $(ele).attr("ParentId") //得到一级分类的id $("input[type='checkbox'][value='" + id1 + "']").attr("checked", "checked"); //选中一级分类 } else { ele.checked = false; //选中二级分类 var id1 = $(ele).attr("ParentId") //得到一级分类的id $("input[type='checkbox'][value='" + id1 + "']").attr("checked", ""); //不选中一级分类 } } }) }); }) </script> </head> <body> <form id="form1" method="post"> <div class="OperateTitle"> <div> 【 商品分类管理 】 </div> </div> <% foreach (var item1 in list1) { string checks1 = ""; if (item1.IsMarket==true) { checks1 = "checked='checked'"; } %> <input type="checkbox" name="Category1"<%=checks1%> id=<%=item1.Id%> value= <%=item1.Id%> parentid="<%=item1.ParentId%>" / > <label for=<%=item1.Id%>><%=item1.Title %></label> <% var listCate2 = cgbll.GetList(item1.Id, false); if (listCate2.Count > 0) { %> <br />&nbsp&nbsp <% }%> <% foreach (var item2 in listCate2) { string checks2 = ""; if (item1.IsMarket == true) { checks2 = "checked='checked'"; } %> <input type="checkbox" name="Category2" <%=checks2%> id=<%=item2.Id%> value= <%=item2.Id%> parentid="<%=item2.ParentId%>" / > <label for=<%=item2.Id%>><%=item2.Title %></label> <% var listCate3 = cgbll.GetList(item2.Id, false); if (listCate3.Count>0) {%> <br />&nbsp&nbsp&nbsp&nbsp <% foreach (var item3 in listCate3 ) { string checks3 = ""; if (item1.IsMarket == true) { checks3 = "checked='checked'"; } %> <input type="checkbox" name="Category3"<%=checks3%> id=<%=item3.Id%> value= <%=item3.Id%> parentid="<%=item3.ParentId%>" / > <label for=<%=item3.Id%>><%=item3.Title %></label> <% } %> <br />&nbsp&nbsp <br />&nbsp&nbsp <% } %> <% }%> <br /> <br /> <% } %> <input type="submit" value="保存" class="button" style="margin-left:50px"/> </form> <V5:bottom ID="bottom" runat="server" /> </body> </html>
原文地址:https://www.cnblogs.com/athook/p/3548187.html