Javascript 在树状结构菜单中，使用angular（无任何预定义组件或库）选中并取消选中复选框

我用纯英语和打字脚本创建了一个树状菜单。现在，我必须在菜单中添加一个增强功能，比如使用一个复选框来选择和取消选择菜单项，该复选框应相应地选择/取消选择子节点复选框。正如我前面提到的，我需要在纯类型脚本中实现这个逻辑。我需要有关父节点和子节点的节点选择/取消选择方法的帮助。请帮我解决这个问题

**期望：** 根据上述屏幕截图，选择和取消选择子元素和父元素的方法是什么。请帮我提些建议

这里我添加了代码片段以供参考

筛选菜单组件.html

 <ul class="main-brand">
    <ng-container *ngFor="let menuItem of filterMenu">
        <li #listElement (click)="menuToggle($event, listElement)" [ngClass]="setActiveClass(listElement)" [attr.data-selected]="false">
            <input type="checkbox" (click)="checkboxClick($event, liElement)" checked="checkedState"> {{menuItem.name}}
            <mat-icon 
             *ngIf="menuItem.subMenu && menuItem.subMenu.length > 0" 
              aria-hidden="false" 
              aria-label="Example home icon" 
              class="material-icons">
                {{iconName}}
            </mat-icon>
        </li>
        <app-filter-sub-menu class="sub-menu-comp"
         *ngIf="menuItem.subMenu && menuItem.subMenu.length > 0"
         [subMenuItem]="menuItem.subMenu"
        ></app-filter-sub-menu>
    </ng-container>
</ul>

<ul class="sub-menu">
    <ng-container *ngFor="let subItem of subMenuItem">
        <li #listElement 
         [ngClass]="setActiveClass(listElement)" 
         (click)="menuToggle($event, listElement)" 
         [attr.data-selected]="false">
            <input type="checkbox" (click)="checkboxClick($event, liElement)" checked="checkedState"> {{subItem.name}}
            <mat-icon 
            *ngIf="subItem.subMenu && subItem.subMenu.length > 0"
            aria-hidden="false" 
            aria-label="Example home icon" 
            class="material-icons"
            class="{{'material-icons' | uppercase}}">
                {{iconName}}
            </mat-icon>
        </li>
        <app-filter-sub-menu class="sub-menu-comp"
        *ngIf="subItem.subMenu && subItem.subMenu.length > 0"
        [subMenuItem]="subItem.subMenu"
        ></app-filter-sub-menu>
    </ng-container>
</ul>

筛选子菜单组件.html

 <ul class="main-brand">
    <ng-container *ngFor="let menuItem of filterMenu">
        <li #listElement (click)="menuToggle($event, listElement)" [ngClass]="setActiveClass(listElement)" [attr.data-selected]="false">
            <input type="checkbox" (click)="checkboxClick($event, liElement)" checked="checkedState"> {{menuItem.name}}
            <mat-icon 
             *ngIf="menuItem.subMenu && menuItem.subMenu.length > 0" 
              aria-hidden="false" 
              aria-label="Example home icon" 
              class="material-icons">
                {{iconName}}
            </mat-icon>
        </li>
        <app-filter-sub-menu class="sub-menu-comp"
         *ngIf="menuItem.subMenu && menuItem.subMenu.length > 0"
         [subMenuItem]="menuItem.subMenu"
        ></app-filter-sub-menu>
    </ng-container>
</ul>

<ul class="sub-menu">
    <ng-container *ngFor="let subItem of subMenuItem">
        <li #listElement 
         [ngClass]="setActiveClass(listElement)" 
         (click)="menuToggle($event, listElement)" 
         [attr.data-selected]="false">
            <input type="checkbox" (click)="checkboxClick($event, liElement)" checked="checkedState"> {{subItem.name}}
            <mat-icon 
            *ngIf="subItem.subMenu && subItem.subMenu.length > 0"
            aria-hidden="false" 
            aria-label="Example home icon" 
            class="material-icons"
            class="{{'material-icons' | uppercase}}">
                {{iconName}}
            </mat-icon>
        </li>
        <app-filter-sub-menu class="sub-menu-comp"
        *ngIf="subItem.subMenu && subItem.subMenu.length > 0"
        [subMenuItem]="subItem.subMenu"
        ></app-filter-sub-menu>
    </ng-container>
</ul>

---

这看起来就像是一个代码请求。投票结束。请提供@AndrewAllen，感谢您的回复。为了便于您理解，我添加了代码片段截图。