本来上个月就像发的，但是一直忙啊忙的也没时间整理，所以拖到了现在。
好吧上面这句就是废话，我就是感概下。下面是正文。
前段时间在弄一个轻量级的web项目，要构建一个树状结构目录，同时希望能把部分选中的状态给表现出来。项目中只用了jquery，个人也不想再引入一些其他的js框架或者插件，一个是考虑到界面展示的样式效果会不一样，另外就是懒得去研究啦。
话不多说，直接上测试图片和代码。
Ps：我代码里还含有一些设置css以及属性等代码，需要参考的朋友请自动忽略。博文结尾处有我当时找到参考的外国网站上的原文链接。
/* 监听checkbox选择事件，勾选时自动勾选上下级选项 */
$("#select-tree-org").on("click", "input[type='checkbox']", function() {
var checked = $(this).prop("checked"),
container = $(this).parent(); container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
}).removeClass('indeterminate'); function checkSiblings(el) {
var parent = el.parent().parent(),
all = true; el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
}); if (all && checked) { parent.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
}).removeClass('indeterminate'); checkSiblings(parent);
} else if (all && !checked) { parent.children('input[type="checkbox"]').prop("checked", checked).removeClass('indeterminate');
parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent); } else { el.parents("li").children('input[type="checkbox"]').prop({
indeterminate: true,
checked: false
}).addClass('indeterminate'); } } checkSiblings(container);
});
原文博主中有测试代码及链接：https://css-tricks.com/indeterminate-checkboxes/