【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
解決了,這個也記得采納了,