我来帮你搞定这个树形视图复选框联动的问题！你的现有代码已经实现了树形结构的展开折叠，但缺少父节点与子节点复选框的联动逻辑，接下来我会一步步帮你完善：

第一步：给父节点补上复选框 #

你的主分类视图里，父节点还没有添加复选框，先把这个补上，这样才能触发联动逻辑：

修改分类视图代码：

{!! Form::open(['route'=>'submit.category']) !!}
<h3>Category List</h3>
<ul id="tree1">
@foreach($categories as $category)
<li>
<label><input type="checkbox" value="{{$category->id}}" name="option[]">{{$category->title}}</label>
@if(count($category->childs))
@include('manageChild',['childs' => $category->childs])
@endif
</li>
@endforeach
</ul>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
{!! Form::close() !!}

第二步：完善Treeview.js的联动逻辑 #

更新你的treed插件，添加复选框的状态监听，实现父子节点的双向联动（父选子全选，子全选父自动选）：

$.fn.extend({
  treed: function (o) {
    var openedClass = 'glyphicon-minus-sign';
    var closedClass = 'glyphicon-plus-sign';

    if (typeof o != 'undefined'){
      if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
      }
      if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
      }
    };

    /* 初始化树形展开折叠逻辑 */
    var tree = $(this);
    tree.addClass("tree");
    tree.find('li').has("ul").each(function () {
      var branch = $(this);
      branch.prepend("<i class='glyphicon " + closedClass + "'></i>");
      branch.addClass('branch');
      branch.on('click', function (e) {
        if (this == e.target) {
          var icon = $(this).children('i:first');
          icon.toggleClass(openedClass + " " + closedClass);
          $(this).children().children().toggle();
        }
      })
      branch.children().children().toggle();
    });

    // 核心：添加复选框联动逻辑
    tree.find('input[type="checkbox"]').on('change', function() {
      var currentCheckbox = $(this);
      var isChecked = currentCheckbox.is(':checked');
      
      // 1. 父节点勾选时，同步所有子节点的选中状态
      currentCheckbox.closest('li').find('ul input[type="checkbox"]').prop('checked', isChecked);

      // 2. 反向联动：子节点状态变化时，自动更新父节点状态
      var parentLi = currentCheckbox.closest('li').parent().closest('li');
      if (parentLi.length > 0) {
        var allChildren = parentLi.find('ul input[type="checkbox"]');
        var checkedChildren = allChildren.filter(':checked');
        // 所有子节点都选中时，父节点自动选中；否则取消选中
        parentLi.find('> label > input[type="checkbox"]').prop('checked', allChildren.length === checkedChildren.length);
      }
    });

    tree.find('.branch>label').each(function () {
      $(this).on('click', function (e) {
        $(this).closest('li').click();
        e.preventDefault();
      });
    });
  }
});

/* 初始化树形视图 */
$('#tree1').treed();

第三步：逻辑说明 #

• 当父节点复选框状态改变时，会自动遍历该分支下所有子节点，把它们的复选框设置为相同的选中状态；
• 额外添加了反向联动：如果某个分支下的所有子节点都被选中，父节点会自动勾选；只要有一个子节点未选中，父节点就会取消勾选，让交互体验更完整。

可选：添加基础样式优化显示 #

如果想让树形结构更清晰，可以加一点简单的CSS：

.tree {
  list-style: none;
  padding-left: 20px;
}
.tree li {
  margin: 5px 0;
}
.tree .branch i {
  cursor: pointer;
  margin-right: 6px;
}

这样修改后，你勾选父节点时，该分支下的所有子节点就会自动被选中，完全满足你的需求啦～

内容的提问来源于stack exchange，提问作者Abdul