Bootstrap 5 的 .list-group 无内置交互逻辑，仅提供样式；需手动用 JavaScript 实现单选/多选、状态同步、表单集成及无障碍支持。
Bootstrap 5 的 .list-group 本身不带内置的交互式选择逻辑（比如单选、多选、状态同步），它只提供样式和基础语义结构。真要实现“点击选中、再次点击取消、限制单选”这类行为，必须自己补 JavaScript。
为什么原生列表组不能直接当选择器用
Bootstrap 列表组的 .active 类只是个静态样式开关，没有绑定任何事件或状态管理：
-
.active不会自动在点击时切换，也不会阻止多次点击导致多个项同时 active - 没有内置的
value或name属性，无法像<select>那样被表单提交或通过form.elements读取 - 禁用状态（
.disabled）仅影响视觉和鼠标指针，不拦截点击事件，需手动event.preventDefault() - 链接型列表组（
<a>或<button>）默认会跳转或提交，必须显式阻止
手动实现单选列表组（含状态同步）
最常见需求是“点一个高亮一个，其他取消”，关键在于：清空已有 .active，再加到当前目标上，并记录选中值：
document.querySelectorAll('.list-group-item').forEach(item => {
item.addEventListener('click', function(e) {
// 阻止链接跳转或按钮默认行为
if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON') {
e.preventDefault();
}
// 清除所有 active
document.querySelectorAll('.list-group-item.active').forEach(el => {
el.classList.remove('active');
});
// 当前项设为 active
this.classList.add('active');
// 可选：存入 data-value 或 innerText 供后续使用
const selectedValue = this.dataset.value || this.textContent.trim();
console.log('选中:', selectedValue);
});
});
- 务必检查
e.target是否为内部链接/按钮，否则e.preventDefault()放错位置会失效 - 用
dataset.value存业务 ID 比依赖文本更可靠（避免空格、换行干扰） - 如果列表项是动态渲染的（如 Ajax 加载），要用事件委托，监听父容器
多选列表组 + 视觉反馈差异
多选需要允许重复点击切换，且最好有明确的视觉区分（比如加图标、变色）：
- 别只靠
.active——它本意是“当前页/焦点项”，不是“已选中”。建议改用自定义类名，如.selected或.checked - 配合
<input type="checkbox">隐藏在列表项内，既能保持语义，又方便表单收集（form.querySelectorAll('input:checked')） - 若纯用 CSS，注意
.list-group-item-success等颜色类会覆盖自定义背景，需提高 CSS 优先级或重置 - 移动端点击区域小，建议给
.list-group-item加padding和cursor: pointer，避免误操作
与原生 <select> 对比的硬伤
用列表组模拟选择器，绕不开几个现实短板：
- 无障碍支持弱：
role="listbox"和aria-selected必须手动加，否则屏幕阅读器无法识别可选状态 - 键盘导航缺失：原生
<select>支持上下键、空格、Enter，列表组需自己实现keydown监听和焦点管理 - 不参与浏览器原生表单验证（
required、checkValidity()），得额外写校验逻辑 - 移动端滚动穿透：长列表在 iOS 上可能触发背景页面滚动，需加
touch-action: none或禁用 body 滚动
真正需要强交互和表单集成时，与其硬改列表组，不如用 <select class="form-select"> 配合 Bootstrap-select 这类增强插件——它们已解决上述所有问题，且兼容性经过大量验证。
