Flutter多级联动复选框列表实现代码求助

下面是基于HTML、原生JavaScript和CSS实现的示例，核心逻辑是主分类复选框选中时启用子分类筛选列表，未选中时禁用：

HTML 结构 #

<div class="checkbox-group">
  <h3>主分类</h3>
  <label><input type="checkbox" class="main-checkbox" value="category1"> 分类1</label>
  <label><input type="checkbox" class="main-checkbox" value="category2"> 分类2</label>
  <label><input type="checkbox" class="main-checkbox" value="category3"> 分类3</label>
</div>

<div class="checkbox-group">
  <h3>子分类筛选（依赖主分类）</h3>
  <div class="sub-checkboxes" id="subCheckboxes">
    <label><input type="checkbox" disabled value="sub1"> 子选项1</label>
    <label><input type="checkbox" disabled value="sub2"> 子选项2</label>
    <label><input type="checkbox" disabled value="sub3"> 子选项3</label>
  </div>
</div>

CSS 样式（可选，用于分组区分） #

.checkbox-group {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.checkbox-group label {
  display: block;
  margin: 8px 0;
}

.sub-checkboxes input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

JavaScript 逻辑 #

// 获取主分类复选框和子分类容器
const mainCheckboxes = document.querySelectorAll('.main-checkbox');
const subCheckboxContainer = document.getElementById('subCheckboxes');
const subCheckboxes = subCheckboxContainer.querySelectorAll('input');

// 定义状态切换函数
function toggleSubCheckboxes() {
  // 判断是否有主分类复选框被选中
  const hasMainChecked = Array.from(mainCheckboxes).some(checkbox => checkbox.checked);
  
  // 切换子分类复选框的禁用状态
  subCheckboxes.forEach(checkbox => {
    checkbox.disabled = !hasMainChecked;
    // 如果禁用，清空选中状态（可选）
    if (!hasMainChecked) {
      checkbox.checked = false;
    }
  });
}

// 给每个主分类复选框绑定事件监听
mainCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', toggleSubCheckboxes);
});

// 初始化执行一次，确保初始状态正确
toggleSubCheckboxes();

核心逻辑说明 #

• 监听所有主分类复选框的change事件
• 使用Array.some()判断是否有主分类选项被选中
• 根据判断结果切换子分类复选框的disabled属性，禁用时可选择清空选中状态
• 初始化时执行一次逻辑，保证页面加载时状态正确

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