在前端页面交互开发中，根据复选框的选中状态动态添加或移除对应的用户项是常见的需求，比如多选用户列表、权限配置等场景都会用到这个逻辑。实现这个功能需要结合DOM操作和事件监听机制，下面详细介绍具体的实现步骤和代码示例。
核心实现思路
整个功能的实现逻辑可以分为三个部分：
- 监听复选框的
change事件，获取当前复选框的选中状态 - 当选中时，创建对应的用户项元素，设置必要的内容与属性，插入到目标容器中
- 当取消选中时，根据复选框的标识找到对应的用户项元素，从DOM中移除
基础HTML结构
首先我们需要准备复选框列表和用户项展示的容器，结构如下：
<div class="checkbox-container">
<label>
<input type="checkbox" class="user-checkbox" data-user-id="1" data-user-name="张三">
张三
</label>
<label>
<input type="checkbox" class="user-checkbox" data-user-id="2" data-user-name="李四">
李四
</label>
<label>
<input type="checkbox" class="user-checkbox" data-user-id="3" data-user-name="王五">
王五
</label>
</div>
<div class="user-list">
<!-- 动态添加的用户项会放在这里 -->
</div>
JavaScript实现逻辑
接下来编写JavaScript代码，实现选中添加、取消移除的功能：
// 获取所有复选框元素
const checkboxes = document.querySelectorAll('.user-checkbox');
// 获取用户项容器
const userList = document.querySelector('.user-list');
// 遍历复选框，绑定change事件
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
// 获取当前复选框的用户ID和用户名
const userId = this.dataset.userId;
const userName = this.dataset.userName;
if (this.checked) {
// 复选框被选中，创建用户项
const userItem = document.createElement('div');
userItem.className = 'user-item';
// 设置自定义属性，方便后续移除时查找
userItem.dataset.userId = userId;
userItem.textContent = userName;
// 插入到用户列表容器中
userList.appendChild(userItem);
} else {
// 复选框被取消选中，查找并移除对应的用户项
const targetItem = userList.querySelector(`.user-item[data-user-id="${userId}"]`);
if (targetItem) {
userList.removeChild(targetItem);
}
}
});
});
样式优化（可选）
为了让用户项展示更清晰，可以添加基础的CSS样式：
.user-list {
margin-top: 20px;
padding: 10px;
border: 1px solid #eee;
border-radius: 4px;
}
.user-item {
padding: 8px 12px;
margin-bottom: 5px;
background-color: #f5f5f5;
border-radius: 3px;
}
注意事项
- 给动态创建的用户项设置和复选框对应的唯一标识（比如
data-user-id），是保证准确移除的关键，避免误删其他用户项 - 如果页面初始时已经有默认选中的复选框，需要在页面加载完成后主动触发一次对应的添加逻辑，保证初始状态一致
- 如果复选框是动态生成的，需要使用事件委托的方式绑定
change事件，避免事件丢失
事件委托适配动态复选框
如果复选框是后续动态添加到页面的，可以用事件委托的方式修改事件绑定逻辑：
// 监听复选框容器的change事件
const checkboxContainer = document.querySelector('.checkbox-container');
const userList = document.querySelector('.user-list');
checkboxContainer.addEventListener('change', function(e) {
// 判断触发事件的是不是复选框
if (e.target.classList.contains('user-checkbox')) {
const checkbox = e.target;
const userId = checkbox.dataset.userId;
const userName = checkbox.dataset.userName;
if (checkbox.checked) {
const userItem = document.createElement('div');
userItem.className = 'user-item';
userItem.dataset.userId = userId;
userItem.textContent = userName;
userList.appendChild(userItem);
} else {
const targetItem = userList.querySelector(`.user-item[data-user-id="${userId}"]`);
if (targetItem) {
userList.removeChild(targetItem);
}
}
}
});