<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>
求详解下面这段代码【jQuery的】
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- Go 旅城通票 2016-02-26 09: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"); } }); });
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 Oracle触发器记录修改前后的字段值
- ¥100 为什么这个恒流源电路不能恒流?
- ¥15 有偿求跨组件数据流路径图
- ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
- ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
- ¥15 CSAPPattacklab
- ¥15 一直显示正在等待HID—ISP
- ¥15 Python turtle 画图
- ¥15 stm32开发clion时遇到的编译问题
- ¥15 lna设计 源简并电感型共源放大器