2 h jsen H_jsen 于 2016.02.27 16:11 提问

HTML代码修改了以后就没有效果,jQuery部分要怎么改?

【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>
【原HTML代码】
<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>
</ul>
【修改部分HTML代码】——之后就没有反应了,请问jQuery部分要怎样修改
<ul class="categories">
    <li><h1><input type="checkbox" /><i class="icon checkbox"></i><a href="#">数码电子</a></h1>
        <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><h1><input type="checkbox" /><i class="icon checkbox"></i><a href="#">服装</a></h1>
        <ul>
            <li><input type="checkbox" />毛衣</li>
            <li><input type="checkbox" />T恤</li>
            <li><input type="checkbox" />羽绒服</li>
            <li><input type="checkbox" />秋裤</li>
        </ul>
    </li>
</ul>

4个回答

showbo
showbo   Ds   Rxr 2016.02.27 20:19
已采纳

代码要依据结构来修改,结构改了当然没有效果

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<ul class="categories">
    <li>
        <h1><input type="checkbox" /><i class="icon checkbox"></i><a href="#">数码电子</a></h1>
        <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>
        <h1><input type="checkbox" /><i class="icon checkbox"></i><a href="#">服装</a></h1>
        <ul>
            <li><input type="checkbox" />毛衣</li>
            <li><input type="checkbox" />T恤</li>
            <li><input type="checkbox" />羽绒服</li>
            <li><input type="checkbox" />秋裤</li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
    $(function () {
        $("ul.categories input").click(function () {
            var children = $(this).parent().next();
            var isChecked = $(this).prop("checked");
            var isParent = false;
            if (children.is('ul')) {
                if (isChecked) {
                    children.find("input").prop("checked", "checked");
                } else {
                    children.find("input").removeProp("checked");
                }
                return///顶级checkbox不需要执行下面
            }
            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(">h1 input").prop("checked", "checked");
            } else {
                $(this).parent().parent().parent().find(">h1 input").removeProp("checked");
            }

        });
    });
</script>

http://ask.csdn.net/questions/239196

解决了,这个也记得采纳了,

H_jsen
H_jsen 谢谢了!
接近 2 年之前 回复
Royal_lr
Royal_lr   Ds   Rxr 2016.02.27 16:16

html代码是不改错了,,或者浏览器的兼容性

u011754100
u011754100   2016.02.27 16:21

你修改后的h1没有开始标签,只有结束标签

sky_rv
sky_rv   2016.02.27 20:19

Dom 错了。你调试就知道了你拿不到你期望的标签了。

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!