H_jsen 2016-02-26 08:55 采纳率: 0%
浏览 1389
已采纳

求详解下面这段代码【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条回答

  • Go 旅城通票 2016-02-26 09: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");
                }
    
            });
        });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上