技术式文章标题：”元素表格树形结构多选框选中子级父级状态变为半选中状态（递归多级）”详细标题：”使用 JavaScript 和 CSS 实现元素表格树形结构中多选框选中子级和父级节点的半选中状态，通过递归多级处理”

共计 3079 个字符，预计需要花费 8 分钟才能阅读完成。

标题：” 技术式文章标题：” 元素表格树形结构多选框选中子级父级状态变为半选中状态（递归多级）”

详细标题：” 使用 JavaScript 和 CSS 实现元素表格树形结构中多选框选中子级和父级节点的半选中状态，通过递归多级处理 ””

在元素表格树形结构中，用户可能需要选中多个节点，并且希望在选中子级节点时，父级节点也处于半选中状态。本文将介绍如何使用 JavaScript 和 CSS 实现这种功能，并通过递归多级处理来处理更复杂的树形结构。

先来看看我们要实现的效果：

在这个例子中，当我们选中了 “Web Development” 节点时，它的父级节点 “Front-end Development” 也处于半选中状态。

下面是我们要实现的步骤：

1. 创建 HTML 结构

我们需要创建一个包含多个节点的 HTML 结构，并为每个节点添加一个多选框和一个父级节点的 ID。

“`html

“`

1. 添加 CSS 样式

我们需要为多选框和其他元素添加样式，以便在选中时显示半选中状态。

“`css
.tree {
list-style: none;
padding: 0;
margin: 0;
}

.tree ul {
padding-left: 20px;
}

.tree li {
position: relative;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}

.tree li label {
margin-left: 10px;
}

.tree li ul {
display: none;
padding: 0;
margin: 0;
}

.tree li:hover > ul {
display: block;
}

.tree li input[type=”checkbox”] {
position: absolute;
opacity: 0;
cursor: pointer;
}

.tree li input[type=”checkbox”]:checked + label:before {
content: “\2714”;
color: #fff;
font-size: 16px;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background-color: #4CAF50;
border-radius: 50%;
padding: 5px;
}

.tree li input[type=”checkbox”]:checked + label:after {
content: “”;
width: 14px;
height: 3px;
background-color: #4CAF50;
position: absolute;
left: 16px;
bottom: -2px;
border-radius: 2px;
}

.tree li input[type=”checkbox”]:checked ~ ul > li {
background-color: #f5f5f5;
}

.tree li input[type=”checkbox”]:checked ~ ul > li label:before {
content: “\2714”;
color: #4CAF50;
}

.tree li input[type=”checkbox”]:checked ~ ul > li label:after {
width: 10px;
height: 3px;
background-color: #4CAF50;
position: absolute;
left: 14px;
bottom: -2px;
border-radius: 2px;
}

.tree li input[type=”checkbox”]:checked ~ ul > li ul > li {
background-color: #fff;
}

.tree li input[type=”checkbox”]:checked ~ ul > li ul > li label:before {
content: “\2022”;
color: #4CAF50;
}

.tree li input[type=”checkbox”]:checked ~ ul > li ul > li label:after {
width: 6px;
height: 3px;
background-color: #4CAF50;
position: absolute;
left: 12px;
bottom: -2px;
border-radius: 2px;
}
“`

1. 添加 JavaScript 处理

我们需要为每个节点添加一个 data-parent 属性，并使用 JavaScript 来处理父级节点的状态。

“`javascript
const tree = document.querySelector(“.tree”);
const checkboxes = tree.querySelectorAll(“input[type=’checkbox’]”);

function toggleParent(checkbox) {
const parentId = checkbox.dataset.parent;
const parentCheckbox = document.getElementById(parentId);
const isParentChecked = parentCheckbox.checked;
const isChildChecked = checkbox.checked;

if (isParentChecked && !isChildChecked) {
parentCheckbox.indeterminate = true;
parentCheckbox.checked = false;
} else if (!isParentChecked && isChildChecked) {
parentCheckbox.indeterminate = true;
parentCheckbox.checked = true;
} else if (isParentChecked && isChildChecked) {
parentCheckbox.indeterminate = false;
parentCheckbox.checked = true;
}

updateTree();
}

function updateTree() {
const checkedCheckboxes = document.querySelectorAll(“input[type=’checkbox’]:checked”);
const indeterminateCheckboxes = document.querySelectorAll(“input[type=’checkbox’]:indeterminate”);
const checkedParents = [];
const indeterminateParents = [];

checkedCheckboxes.forEach(checkbox => {
const parentId = checkbox.dataset.parent;
const parentCheckbox = document.getElementById(parentId);

if (parentCheckbox.indeterminate) {indeterminateParents.push(parentCheckbox);
} else {checkedParents.push(parentCheckbox);
}