使用JSON多维数组填充嵌套复选框实现教师班级分配

我来帮你搞定这个嵌套复选框的动态生成需求！你的核心场景是根据选中的学校，加载对应的校区及下属班级的嵌套复选框列表，现在代码里的主要问题是没有完成校区和班级DOM元素的动态构建，还有一些小的细节问题（比如ID重复、变量污染），下面是完整的解决方案：

第一步：修正HTML结构（解决ID冲突问题） #

原HTML里的<div class="nested" id="school_id">和下拉框的id="school_id"重复了，这会导致jQuery选择器出错，我们把容器ID改成campus-container，并清空示例的li内容，让JS动态生成：

<table class="form-table" id="teacher_faculty_meta">
 <tr valign="top">
 <th scope="row">
 <label for="school_id">College/School * </label>
 </th>
 <td><select name="teacher_faculty_meta[school_id]" id="school_id" class="regular-text">
 <option value='7'>MCS</option>
 <option value='8'>JPPS</option>
 <option value='9'>FCC</option>
 <option value='10'>Punjab</option>
 </select>
 </td>
 </tr>
 <!-- Campus / Branch Select Box -->
 <tr valign="top">
 <th scope="row">
 <label for="campus_id">Campus / Branch</label>
 </th>
 <td>
 <div class="nested" id="campus-container">
 <ul id="campus-list">
 <!-- JS will dynamically populate this area -->
 </ul>
 </div>
 </td>
 </tr>
</table>

第二步：完善jQuery代码（动态生成嵌套复选框） #

这里我们修正了变量污染问题，正确解析校区和班级数据，并且生成符合需求的嵌套DOM结构，同时优化了表单name的命名（区分校区和班级，方便后端接收数组）：

jQuery(function($){
 // 学校-校区-班级数据
 var campuses = {
 "7":{
 "16*Boys Campus": { "13":"Class Two","19":"Class Three","21":"Class Four","22":"Class Five","23":"Class Six" },
 "11*Girls Campus": { "19":"Class Three","21":"Class Four","22":"Class Five","23":"Class Six" }
 },
 "8":{
 "14*Boys Campus": { "18":"Class One","22":"Class Five","23":"Class Six" },
 "15*Girls Campus": { "18":"Class One","19":"Class Three" }
 }
 };

 // 学校下拉框改变事件
 $('#school_id').on('change',function() {
 var selectedSchoolId = $(this).val();
 var campusData = campuses[selectedSchoolId];
 var $campusList = $('#campus-list');
 
 // 清空现有内容
 $campusList.empty();

 // 如果当前学校没有校区数据，提示或跳过
 if(!campusData){
 $campusList.append('<li>No campuses available for this school</li>');
 return;
 }

 // 遍历每个校区
 $.each(campusData, function(campusKey, classes){
 // 拆分校区ID和名称（格式：ID*名称）
 var [campusId, campusName] = campusKey.split("*");
 // 创建校区的li容器
 var $campusLi = $('<li>').attr('id', `campus_id-${campusId}`);

 // 添加校区复选框
 var $campusCheckbox = $('<input>')
 .attr('type', 'checkbox')
 .attr('class', 'checkbox-info campus-checkbox')
 .attr('name', 'teacher_faculty_meta[campus_ids][]') // 校区多选，用数组name
 .attr('value', campusId);
 var $campusLabel = $('<label>').attr('for', `campus-${campusId}`).text(campusName);

 // 添加班级的子列表
 var $classUl = $('<ul>');
 // 遍历当前校区下的班级
 $.each(classes, function(classId, className){
 var $classLi = $('<li>');
 var $classCheckbox = $('<input>')
 .attr('type', 'checkbox')
 .attr('class', 'checkbox-info class-checkbox')
 .attr('name', 'teacher_faculty_meta[class_ids][]') // 班级多选，用数组name
 .attr('value', classId);
 var $classLabel = $('<label>').attr('for', `class-${classId}`).text(className);
 $classLi.append($classCheckbox).append($classLabel);
 $classUl.append($classLi);
 });

 // 把所有元素组装到校区li里
 $campusLi.append($campusCheckbox).append($campusLabel).append($classUl);
 // 添加到主列表
 $campusList.append($campusLi);
 });
 });
});

关键细节说明 #

• 变量声明优化：用解构赋值拆分校区ID和名称，避免原代码中未声明变量导致的全局污染问题
• 表单name规范：把校区和班级的name分别设为teacher_faculty_meta[campus_ids][]和teacher_faculty_meta[class_ids][]，后端可以直接接收数组格式的选中值
• ID冲突解决：把容器ID改成campus-container，避免和下拉框ID重复导致的选择器错误
• 空数据处理：当选中的学校没有对应校区数据时，显示提示信息，提升用户体验

可选交互优化（额外加分） #

如果需要实现“点击校区复选框全选/反选该校区下所有班级”的功能，可以在JS里添加这段委托事件代码：

// 委托事件处理校区复选框的全选/反选
$('#campus-container').on('change', '.campus-checkbox', function(){
 var $this = $(this);
 var $classCheckboxes = $this.siblings('ul').find('.class-checkbox');
 $classCheckboxes.prop('checked', $this.prop('checked'));
});

这样用户操作起来会更方便！

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