如何在下拉菜单中实现多选复选框（Bootstrap 多选下拉）

聖光之護

发布时间：2026-02-12 09:33:51

926人浏览过

来源于php中文网

原创

如何在下拉菜单中实现多选复选框（Bootstrap 多选下拉）

本文介绍如何基于 bootstrap 构建支持多选的下拉菜单，通过在下拉项中嵌入复选框（checkbox），并配合 jquery 阻止事件冒泡，确保点击复选框时下拉菜单不意外关闭。

在标准 HTML 中，原生）或按住 Ctrl/Meta 多选（

核心实现原理

关键在于：

Reword

AI文章写作，一个会思考的编辑

下载

使用 Bootstrap 的 .dropdown 结构替代原生
在 .dropdown-menu 的每个
中嵌入 ...，提升可点击区域与无障碍支持；
必须阻止复选框及标签的点击事件向上冒泡，否则会触发 dropdown-toggle 的隐藏逻辑，导致菜单闪退。

完整可运行示例




  
  Bootstrap 多选下拉菜单
  
  




  
    
    
       选项一
       选项二
       选项三
       选项四
       选项五

注意事项与最佳实践

✅ 必须引入 jQuery 和 Bootstrap JS/CSS（本例使用 v3.3.7，兼容性好；若用 Bootstrap 5，需改用 Popper + 手动控制下拉逻辑）；
✅ e.stopPropagation() 是核心，不可省略；仅 e.preventDefault() 不足以解决问题；
✅ 推荐为每个添加 value 属性，便于后续通过 $('input:checked').map(...) 提取选中值；
⚠️ Bootstrap 3 的 .checkbox 类需配合使用，确保样式正确；若使用 Bootstrap 4/5，请改用 form-check 相关类；
? 如需服务端提交，建议额外添加隐藏字段或通过 AJAX 收集选中值，而非依赖表单自动序列化（因复选框不在
原生控件流中）。

该方案兼顾语义清晰性、交互稳定性与视觉一致性，是构建专业级多条件筛选器的轻量可靠选择。

在Java里类加载机制是什么_Java类加载全过程原理解析

java类加载器如何理解？

深入理解Kafka消息发送机制与client.rack配置指南

在Java中如何实现在线问答与评分系统_问答评分项目开发方法说明

在Java中如何开发简易在线商城首页_商城首页模块开发指南

相关标签:

bootstrap jquery ajax bootstrap select checkbox map JS 事件 input li

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：控制台文件比较工具_对比两个文本文件内容差异的逻辑实现下一篇：Spring Batch 单元测试中正确断言步骤异常的方法

作者最新文章

使用 JavaScript 实现多语言内容切换的正确实践

2026-02-11 09:57

玩家怒喷《星际争霸》竟然要外包：暴雪已没这个能力

2026-02-11 10:11

如何构造经过三个指定点的三次贝塞尔曲线（含水平端点约束）

2026-02-11 10:13

JAX 的 jit 缓存机制：何时复用 JAXPR，何时重新编译

2026-02-11 10:18

如何在组合模式中实现逐层递增的缩进显示

2026-02-11 10:23

html如何在div中一张张地显示图片

2026-02-11 10:25

如何使用 Turtle 模块实现键盘控制海龟移动（无需 keyboard 库）

2026-02-11 10:29

构建跨平台复用的页头页脚组件：HTML/CSS/JS 独立封装实践指南

2026-02-11 10:29

PHP中圆括号包裹new Login的语法作用与必要性详解

2026-02-11 10:29

如何在 Go 程序中动态获取 HTTP 服务器实际绑定的端口号

2026-02-11 10:40

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发 AI 聊天问答

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发 AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI 编程开发 Agent智能体

腾讯元宝

腾讯混元平台推出的AI助手

文档处理 AI 聊天问答

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发 AI 文本写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发 AI 文本写作

智谱清言 - 免费全能的AI助手

AI 编程开发 Agent智能体

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

153

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

317

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

403

2023.11.10