### 如何使用
Bootstrap 实现带
复选框的
多选下拉菜单
Bootstrap 提供了强大的组件功能，通过结合 HTML、CSS 和 JavaScript，可以实现带有
复选框的
多选下拉菜单。以下是一个完整的示例代码和详细说明。
#### HTML 结构
首先定义一个按钮组作为触发器，并嵌套一个包含
复选框的
下拉菜单。
```html
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
多选菜单 <span class="badge bg-light text-dark">0</span>
</button>
<ul class="dropdown-menu multi-
select-dropdown">
<li>
<div class="form-check px-3">
<input class="form-check-input" type="checkbox" value="1" id="option1">
<label class="form-check-label" for="option1">
选项 1</label>
</div>
</li>
<li>
<div class="form-check px-3">
<input class="form-check-input" type="checkbox" value="2" id="option2">
<label class="form-check-label" for="option2">
选项 2</label>
</div>
</li>
<li>
<div class="form-check px-3">
<input class="form-check-input" type="checkbox" value="3" id="option3">
<label class="form-check-label" for="option3">
选项 3</label>
</div>
</li>
</ul>
</div>
```
#### CSS 样式
为了增强用户体验，可以通过自定义样式调整
下拉菜单的外观。
```css
.multi-
select-dropdown .form-check {
cursor: pointer;
}
.multi-
select-dropdown .form-check-input:checked + .form-check-label {
font-weight: bold;
}
```
#### JavaScript 功能
通过 JavaScript 监听
复选框的变化，动态更新按钮上的文本或徽章。
```javascript
document.addEventListener("DOMContentLoaded", function () {
const dropdownButton = document.query
Selector(".btn-group > button");
const checkboxes = document.query
SelectorAll(".multi-
select-dropdown input[type='checkbox']");
function updateButtonText() {
const
selectedCount = Array.from(checkboxes).filter((cb) => cb.checked).length;
dropdownButton.query
Selector(".badge").textContent =
selectedCount;
if (
selectedCount === 0) {
dropdownButton.textContent = "
多选菜单";
} else {
dropdownButton.textContent = `已
选择 ${
selectedCount} 项`;
}
}
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", updateButtonText);
});
});
```
### 解释
1. **HTML 部分**：`<div class="btn-group">` 定义了一个按钮组[^2]，其中包含一个触发
下拉菜单的按钮和一个带有
复选框的 `<ul>` 列表。
2. **CSS 部分**：通过 `.form-check` 类增强了
复选框的样式，使其更加直观。
3. **JavaScript 部分**：监听
复选框的状态变化，并动态更新按钮上的文本和徽章内容[^1]。
此实现无需额外引入
插件，完全基于
Bootstrap 的原生组件功能完成。
---
###
本文介绍了一个基于Bootstrap 4框架的多选下拉插件，将多选列表转换为带复选框的易用下拉列表。用户可通过单击复选框进行选择，并提供清除选项功能。该插件遵循Apache 2许可证，使用步骤包括安装jQuery和Bootstrap 4库，加载jQuery BsMultiSelect脚本，并在多选列表上应用该函数。
最低0.47元/天 解锁文章
扫一扫
2727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
