<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>
$(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");
}
});
});
这要怎么解释,,都是很常用的方法,就是一个选中父节点关联子节点的问题
这段js就是为ul列表下的每一个input类型的复选框添加点击事件,如果某个分类条目下的所有选项都选中了,那么自动将前面的大分类选项也选中。
例如:如果你将"家电”这个分类下的子分类电饭煲、电磁炉……等所有子条目都选中了,那么自动将"家电"这个选项也选中。