jquey复选框三级分类关联一二级分类
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 />  
<% }%>
<% 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 />    
<% 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 />  
<br />  
<% } %>
<% }%>
<br />
<br />
<% } %>
<input type="submit" value="保存" class="button" style="margin-left:50px"/>
</form>
<V5:bottom ID="bottom" runat="server" />
</body>
</html>
以上是关于jquey复选框三级分类关联一二级分类的主要内容，如果未能解决你的问题，请参考以下文章
阶段一-02.分类，推荐，搜索，评价，购物车开发-第1章 首页轮播图+分类功能实现-1-4 分类实现 - 自连接查询子分类