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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!