2 h jsen H_jsen 于 2016.02.26 16:55 提问

求详解下面这段代码【jQuery的】
 <script src="jquery-1.8.3.js"></script>
<script>
$(function(){
    $("ul.categories input").click(function(){
        var children = $(this).next();
        var isChecked = $(this).prop("checked");

        if(children){
            if(isChecked){
                children.find("input").prop("checked","checked");
            }else{
                children.find("input").removeProp("checked");
            }
        }

        var checkedCount = $(this).parent().parent().find(">li >input:checked").length;
        var count = $(this).parent().parent().find(">li >input").length;

        if(checkedCount == count){
            $(this).parent().parent().parent().find(">input").prop("checked","checked");
        }else{
            $(this).parent().parent().parent().find(">input").removeProp("checked");
        }

    });
});
</script>
<ul class="categories">
    <li><input type="checkbox" />数码电子
        <ul>
            <li><input type="checkbox" />手机</li>
            <li><input type="checkbox" />电脑</li>
            <li><input type="checkbox" />U盘</li>
            <li><input type="checkbox" />相机</li>
        </ul>
    </li>
    <li><input type="checkbox" />服装
        <ul>
            <li><input type="checkbox" />毛衣</li>
            <li><input type="checkbox" />T恤</li>
            <li><input type="checkbox" />羽绒服</li>
            <li><input type="checkbox" />秋裤</li>
        </ul>
    </li>
    <li><input type="checkbox" />饰品
        <ul>
            <li><input type="checkbox" />纯金</li>
            <li><input type="checkbox" />纯银</li>
        </ul>
    </li>
    <li><input type="checkbox" />家电
        <ul>
            <li><input type="checkbox" />电饭煲</li>
            <li><input type="checkbox" />电磁炉</li>
            <li><input type="checkbox" />吸尘器</li>
            <li><input type="checkbox" />液化气灶</li>
        </ul>
    </li>
</ul>

3个回答

showbo
showbo   Ds   Rxr 2016.02.26 17:17
已采纳
     $(function () {
        $("ul.categories input").click(function () {
            var children = $(this).next();//this只想你当前点击的input,调用next获取ul对象
            var isChecked = $(this).prop("checked");//checkbox是否勾选

            if (children) {//有ul,这获取ul下的checkbox进行勾选或者取消勾选
                if (isChecked) {
                    children.find("input").prop("checked", "checked");
                } else {
                    children.find("input").removeProp("checked");
                }
            }

            var checkedCount = $(this).parent().parent().find(">li >input:checked").length;//获取input的父元素ul下的li元素下的直接checkbox被勾选的个数

            var count = $(this).parent().parent().find(">li >input").length;//这获取input的父元素ul下的li元素下的直接checkbox个数
            //下面就是判断2个长度一样就勾选父元素的input用的,就是勾选完子checkbox后其父checkbox也自动勾上,否则取消
            if (checkedCount == count) {
                $(this).parent().parent().parent().find(">input").prop("checked", "checked");
            } else {
                $(this).parent().parent().parent().find(">input").removeProp("checked");
            }

        });
    });
H_jsen
H_jsen 请问我将<li><input type="checkbox" />数码电子改为 <li><h1><input type="checkbox" /><i class="icon checkbox"></i><a href="#">数码电子</a></h1>就没反应了
2 年多之前 回复
H_jsen
H_jsen 请问我将<li><input type="checkbox" />数码电子改为
2 年多之前 回复
H_jsen
H_jsen 请问我将<li><input type="checkbox" />数码电子改为
2 年多之前 回复
Royal_lr
Royal_lr   Ds   Rxr 2016.02.26 17:02

这要怎么解释,,都是很常用的方法,就是一个选中父节点关联子节点的问题

wojiushiwo945you
wojiushiwo945you   Ds   Rxr 2016.02.29 09:12

这段js就是为ul列表下的每一个input类型的复选框添加点击事件,如果某个分类条目下的所有选项都选中了,那么自动将前面的大分类选项也选中。
例如:如果你将"家电”这个分类下的子分类电饭煲、电磁炉……等所有子条目都选中了,那么自动将"家电"这个选项也选中。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
啊哈C——学习4.10一起来找茬
2015年2月3日21:07:46 1.下面这段代码是求1*2*3*4*5*6*7*8*9*10的值。其中有4个错误,快来改正吧! #include #include int main() { /* int i,sum; sum=0; for(i+1,i<10,i++); { sum=sum*i; } printf("%
下面这段代码要循环延时输出0 1 2 3 4,输出结果是否正确,若不正确请修改,并理
for(var i=0;i {        setTimeout(function()        {               document.write(i + " ");        },100); } 以上代码输出:5,5,5,5,5 修改如下: for(vari=0;i {        (function(i){               setTi
下面程序输出什么?为什么?
下面程序输出什么?为什么?   class A   {   private:   static int i;   public:   A()   {   i++;   }   A(const A&)   {   i++;   }   static void output()   {   cout }   };   A f(A& a)   {   A a
同一空间如果放多个asp.net网站,防止App_Code.dll冲突?
最近要测试一个网站,发现发布后的文件中也有App_Code.dll 致使和asp.net空间原有网站冲突, 解决来决绝去还是不行,最后没辙我是这么干的。 把所偶App code目录的类都单独拿出来,见一个Class项目,统一编译成一个dll,起名 XXX.dll, 然后用网站引用这个XXX.dll,然后就没有App_code.dll了,避免了冲突。 如今一个空间我放了四个网站项目,虽然只能
C#笔试题(二)
一、问答题 61.下面这段代码输出什么?为什么? 答案注释: int i=5;  int j=5;  if (Object.ReferenceEquals(i,j))  Console.WriteLine("Equal");  else  Console.WriteLine("Not Equal");  不相等,因为比较的是对像 62.什么叫做SQL注入,如何防止?请举例说明。
啊哈C——学习2.6一起来找茬
2015年1月26日22:27:43 1.下面这段代码是让计算机分别计算10-5的值与10+5的值,并分两行显示,第一行显示差,第二行显示和。其中有3个错误,快来改正吧! //#include #include //第1个错,include误写为inlcude #include //int mian() //第2个错,main误写为mian int main()
编写一段代码,其功能是打印代码本身
编写一段代码,其功能是打印代码本身#includemain(){char *c="#include%cmain()%c{%cchar *c=%c%s%c;%cprintf(c,10,10,10,34,c,34,10,10);%c}";printf(c,10,10,10,34,c,34,10,10);}以上代码来自:编写一段代码,其功能是打印代码本身。该代码将自身编为单行的字符串然后打印,并使用AS
腾讯 2016 春招笔试(伪)权威解析
这篇文章的原文在:原文地址 1、应用程序开发过程中,下面哪些开发习惯可能导致安全漏洞? 在程序代码中打印日志输出敏感信息方便测试(√) 在使用数组前判断是否越界 在生成随机数前使用当前时间设置随机数种子(√) 设置配置文件权限为rw-rw-rw-(√) 只说一下第三个吧,给出篇文章随机数是骗人的 这篇文章中提到的另一篇文章我也给出链接,省去大家查找的时间当随机不够随机:一个在线扑克游戏...
5-3 出租 (20分)
下面是新浪微博上曾经很火的一张图:一时间网上一片求救声,急问这个怎么破。其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2]=1,index[1]=0 对应 arr[0]=8,index[2]=3 对应 arr[3]=0,以此类推…… 很容易得到电话号码是18013820100。本题要求你编写一个程序,为任何一个电话号码生成这段代码 —— 事实上,只要生成
C/C++经典题解析
以下题目都是来时何海涛博客的 C/C++/C#面试题精选 系列,感谢博主的整理。这些题不仅帮助我通过一些笔试,更重要的是帮助我很好的理解C/C++。以前很讨厌这些题,现在想来做些题还是很有用的,至少可以帮助你巩固知识加深理解。 为支持博主的原创,我附上文章的连接地址 点击打开链接。 在阅读中发现博主解释的还不够详细,为了能够更好的帮助网友,同时也帮助自己梳理一下知识,我重新整理了一下。