【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>
HTML代码修改了以后就没有效果,jQuery部分要怎么改?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
4条回答 默认 最新
- Go 旅城通票 2016-02-27 12: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
解决了,这个也记得采纳了,
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报