程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> javascript-HTML代碼修改了以後就沒有效果,jQuery部分要怎麼改?

javascript-HTML代碼修改了以後就沒有效果,jQuery部分要怎麼改?

編輯:編程解疑
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>

最佳回答:


代碼要依據結構來修改,結構改了當然沒有效果

 <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

解決了,這個也記得采納了,

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved