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>

  

时间: 2024-10-29 19:10:19

jquey复选框三级分类关联一二级分类的相关文章

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=&quo

Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有mvc的特点). 1. QStandardItemModel在QTreeView中的使用 使用QTreeView的对应模型是QStandardItemModel,这个是Qt对应ui界面最有用的模型,它可以用于树形控件.列表控件.表格控件等等和条目有关的控件.QStandardItemModel用于列表

DevExpress XtraGrid RepositoryItemCheckEdit 复选框多选的解决方法

1. RepositoryItemCheckEdit默认有三种状态,选中状态.未选中状态和半选中状态(半选中状态通常用在TreeList中如果父节点下的子节点有选中的有未选中的,则父节点状态为半选中状态).如果RepositoryItemCheckEdit所在的列未绑定数据源,那么该列默认只可以单选:如果绑定了数据源,那么可以同时多选. 2. 问题描述: 上述描述的ColumEdit关联FieldName数据源,但是在设计功能中并不仅仅这样就可以同时多选,还是选中后,在Grid其他的位置再单击鼠

原生js实现三级复选框

工作中要做一个三级的复选框,用js实现了一下,从项目中把相关代码抽取出来了,有相关需求的可以参考一下.亲测可用. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>三级复选框</title> </head> <body&

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

设置复选框的只读效果,并且可通过表单提交

在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如在信息展示页面),这时候就需要将复选框设置成只读的效果. 提到只读,很容易想到使用readonly属性,但是对于复选框来说,这个属性和期望得到的效果是有差别的.原因在于readonly属性关联的是页面元素的value属性(例如textbox,设置了readonly就不能修改输入框的文本内容),而复选框的勾选/

复选框 省市区 联动(监听input的change事件)

需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第三级区域的第一个.同理监听span或者label(因为label与input的搭配使用) 辅助:后台提供省市区的数据: 两种方式: A:后台直接给dom结构(后台写好基本构架,前段自己在后台code填写需要的dom,class,方便前端开发) B:后台直接给前段一个json数据,前段自己遍历.(和后

制作复选框(Toggle)

怎样判断是否应当使用复选框 复选框,就是对一个选项做上一个标记,表示这个选项已经被选中了.在游戏中,复选框一般用来做一些选项的控制,这种选项一般都只有两种答案:是和否.例如,单击一下开启音乐的复选框,这个复选框上就打了一个勾,然后音乐在游戏中就会开发:如果再单击一下,则这个勾会取消掉,然后音乐相会在游戏中关闭.这就是复选框最常见的用法. 要判断是否要使用复选框时,可以遵循以下规律. (1)该功能只有两种选择状态:是.否. (2)该功能同一时间只能激活且必须激活一种选择状态. (3)该功能的两种状

五表联查sql和复选框 增删改查

这是五表联查的效果图,如果这个不明显,那么用添加说话 这样就明显了把 这个送餐时间和地点,都是一对多的,那么这个菜单就是多对多,其实对于老鸟来说没有什么大不了,但是对于新手,我希望还是可以有点帮助的,这个是用Mybatis写的 首先我们先把sql给贡献出来,或许有些丑,不过,这反正也是给自己写的随笔无所谓了 select a.*,b.fname from    (select a.*,c.aname from (select a.*,b.name tname from    t_order a,