新闻中心

利用J*aScript和Bootstrap实现多开关联动隐藏元素

2025-10-18
浏览次数：次
返回列表

利用JavaScript和Bootstrap实现多开关联动隐藏元素

本教程详细介绍了如何使用bootstrap的collapse组件和原生j*ascript，根据多个开关（checkbox）的选中状态来动态控制一个特定div元素的显示与隐藏。通过监听开关的`change`事件，并利用`array.prototype.some()`方法判断至少一个开关是否被选中，从而实现联动效果，提升用户界面的交互性。

在现代Web应用中，动态地根据用户交互调整页面元素的可见性是一种常见的需求。例如，当用户勾选或取消勾选某些选项时，可能需要显示或隐藏相关的配置区域或提示信息。本教程将指导您如何结合Bootstrap的Collapse组件和简单的J*aScript代码，实现一个高级的联动效果：当且仅当所有关联的开关（checkbox）都处于未选中状态时，隐藏一个特定的DIV元素。

场景描述

假设您有两个Bootstrap风格的开关按钮，每个开关控制着表单中一个独立的折叠区域（例如，两个不同的复选框组）。此外，页面上还有一个包含额外选项的段落或DIV，我们希望这个段落仅在两个开关都未被激活（即都未选中）时才隐藏。当至少一个开关被激活时，该段落应保持可见。

实现原理

我们将采用以下策略来实现这一功能：

  1. HTML结构准备：确保所有相关的开关（input type="checkbox" role="switch"）和目标隐藏/显示DIV都有唯一的ID。目标DIV应包含Bootstrap的collapse类，但不需要data-bs-toggle和data-bs-target属性，因为我们将通过J*aScript手动控制其状态。
  2. J*aScript控制：
    • 使用bootstrap.Collapse的J*aScript API来实例化目标DIV的折叠组件，并禁用其默认的切换行为（toggle: false）。
    • 获取所有相关开关的引用。
    • 为每个开关添加change事件监听器。
    • 在事件监听器中，检查所有开关的选中状态。
    • 根据检查结果，调用collapsible.show()或collapsible.hide()方法来控制目标DIV的可见性。

详细实现步骤

1. HTML结构

首先，确保您的HTML文件引入了Bootstrap的CSS和JS文件。然后，构建以下核心HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap多开关联动</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-4">
        <h3>开关控制示例</h3>

        <!-- 开关1 -->
        <label class="switch mt-2">
            <input class="form-check-input" type="checkbox" role="switch" id="ds-activate" data-bs-toggle='collapse' data-bs-target='#dsForm' aria-expanded="false" aria-controls="dsForm" checked>
            <div class="slider round"></div>
        </label>
        <span class="ms-2">激活DS表单</span>

        <!-- 开关2 -->
        <label class="switch mt-2">
            <input class="form-check-input" type="checkbox" role="switch" id="email-activate" data-bs-toggle='collapse' data-bs-target='#emailForm' aria-expanded="false">
            <div class="slider round"></div>
        </label>
        <span class="ms-2">激活Email表单</span>

        <!-- 目标隐藏/显示DIV -->
        <div id="hideWhenBothSwitchOff" aria-expanded="false" class="collapse show mt-3">
            <label class="form-label">更多选项</label>
            <p>这里是对后续选项的解释说明。</p>
        </div>

        <!-- 开关1控制的折叠内容 -->
        <div id="dsForm" aria-expanded="false" class="collapse show">
            <div class="form-check mt-2 mb-2">
                <input class="form-check-input" type="checkbox" value="" id="all-documents">
                <label class="form-check-label" for="all-documents">
                    复选框1标签
                </label>
            </div>
        </div>

        <!-- 开关2控制的折叠内容 -->
        <div id="emailForm" aria-expanded="false" class="collapse">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="all-emails">
                <label class="form-check-label" for="all-emails">
                    复选框2标签
                </label>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jA3Q0hK4A3G3H3F3D3C3B3A3B3C3D3E3F3G3H3I3J3K3L3M3N3O3P3Q3R3S3T3U3V3W3X3Y3Z" crossorigin="anonymous"></script>
    <script>
        // 在这里添加J*aScript代码
    </script>
</body>
</html>

关键点说明：

察言观数AskTable 察言观数AskTable

企业级AI数据表格智能体平台

察言观数AskTable 78 查看详情 察言观数AskTable
  • id="ds-activate" 和 id="email-activate" 是我们用于控制的目标开关。
  • id="hideWhenBothSwitchOff" 是我们希望根据开关状态动态显示或隐藏的DIV。它包含 collapse 类，并且初始状态为 show（可见），因为在示例中 ds-activate 初始是 checked。
  • data-bs-toggle 和 data-bs-target 属性用于 ds-activate 和 email-activate 开关，以控制它们各自的折叠区域 (dsForm 和 emailForm)。这与我们即将实现的联动逻辑是独立的，但展示了Bootstrap开关的典型用法。

2. J*aScript逻辑

现在，我们将添加J*aScript代码来处理开关的change事件并控制目标DIV的可见性。

// 获取目标DIV的Bootstrap Collapse实例
// toggle: false 表示不通过data属性自动切换，完全由JS控制
const collapsible = new bootstrap.Collapse('#hideWhenBothSwitchOff', {
  toggle: false,
});

// 获取所有需要监听的开关元素
const checkboxes = [
  document.getElementById('ds-activate'),
  document.getElementById('email-activate'),
];

// 为每个开关添加事件监听器
checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    // 检查是否有至少一个开关被选中
    // Array.prototype.some() 方法会测试数组中的某个元素是否通过了指定函数的测试。
    // 如果有任何一个元素的checked属性为true，则返回true。
    const atLeastOneChecked = checkboxes.some(({ checked }) => checked);

    // 根据条件决定是显示还是隐藏目标DIV
    const operation = atLeastOneChecked ? 'show' : 'hide';

    // 调用Collapse实例的show()或hide()方法
    collapsible[operation]();
  });
});

// 页面加载后，根据初始状态执行一次检查
// 确保页面加载时，目标DIV的显示状态是正确的
document.addEventListener('DOMContentLoaded', () => {
    const atLeastOneChecked = checkboxes.some(({ checked }) => checked);
    const operation = atLeastOneChecked ? 'show' : 'hide';
    collapsible[operation]();
});

代码解释：

  1. new bootstrap.Collapse('#hideWhenBothSwitchOff', { toggle: false });
    • 这行代码创建了一个bootstrap.Collapse实例，它绑定到ID为hideWhenBothSwitchOff的DIV。
    • toggle: false 是关键，它告诉Bootstrap不要根据HTML中的data-*属性自动切换此组件的状态，而是完全由J*aScript代码来控制。
  2. const checkboxes = [...]
    • 我们通过ID获取了两个开关的DOM元素，并将它们存储在一个数组中，方便后续迭代处理。
  3. checkboxes.forEach((checkbox) => { ... });
    • 遍历checkboxes数组，为每个开关添加一个change事件监听器。这意味着每当任何一个开关的状态发生变化时，回调函数都会被执行。
  4. const atLeastOneChecked = checkboxes.some(({ checked }) => checked);
    • 这是实现联动逻辑的核心。Array.prototype.some()方法会遍历数组中的每个元素。
    • ({ checked }) => checked 是一个箭头函数，它解构出每个checkbox对象的checked属性，并返回其布尔值。
    • 如果数组中至少有一个开关的checked属性为true，那么some()方法就会返回true，atLeastOneChecked变量也将为true。
    • 如果所有开关都未选中，some()将返回false。
  5. const operation = atLeastOneChecked ? 'show' : 'hide';
    • 这是一个三元运算符，根据atLeastOneChecked的值，确定要执行的操作是'show'（显示）还是'hide'（隐藏）。
  6. collapsible[operation]();
    • 动态调用collapsible对象上的show()或hide()方法，从而控制hideWhenBothSwitchOff这个DIV的可见性。
  7. document.addEventListener('DOMContentLoaded', () => { ... });
    • 这个额外的事件监听器确保在页面完全加载后，会立即执行一次状态检查。这对于处理页面初始加载时开关的默认选中状态非常重要，以保证目标DIV的初始可见性是正确的。

完整代码示例

将上述HTML和J*aScript代码整合在一起，您将得到一个功能完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap多开关联动隐藏元素</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <style>
        /* 可选：为开关添加一些基本样式，如果Bootstrap默认样式不满足 */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }
        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }
        /* Rounded sliders */
        .slider.round {
            border-radius: 34px;
        }
        .slider.round:before {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h3>开关控制示例</h3>

        <!-- 开关1 -->
        <label class="switch mt-2">
            <input class="form-check-input" type="checkbox" role="switch" id="ds-activate" data-bs-toggle='collapse' data-bs-target='#dsForm' aria-expanded="false" aria-controls="dsForm" checked>
            <div class="slider round"></div>
        </label>
        <span class="ms-2">激活DS表单</span>

        <!-- 开关2 -->
        <label class="switch mt-2">
            <input class="form-check-input" type="checkbox" role="switch" id="email-activate" data-bs-toggle='collapse' data-bs-target='#emailForm' aria-expanded="false">
            <div class="slider round"></div>
        </label>
        <span class="ms-2">激活Email表单</span>

        <!-- 目标隐藏/显示DIV -->
        <div id="hideWhenBothSwitchOff" aria-expanded="false" class="collapse show mt-3">
            <label class="form-label">更多选项</label>
            <p>这里是对后续选项的解释说明。</p>
        </div>

        <!-- 开关1控制的折叠内容 -->
        <div id="dsForm" aria-expanded="false" class="collapse show">
            <div class="form-check mt-2 mb-2">
                <input class="form-check-input" type="checkbox" value="" id="all-documents">
                <label class="form-check-label" for="all-documents">
                    复选框1标签
                </label>
            </div>
        </div>

        <!-- 开关2控制的折叠内容 -->
        <div id="emailForm" aria-expanded="false" class="collapse">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="all-emails">
                <label class="form-check-label" for="all-emails">
                    复选框2标签
                </label>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jA3Q0hK4A3G3H3F3D3C3B3A3B3C3D3E3F3G3H3I3J3K3L3M3N3O3P3Q3R3S3T3U3V3W3X3Y3Z" crossorigin="anonymous"></script>
    <script>
        // 获取目标DIV的Bootstrap Collapse实例
        const collapsible = new bootstrap.Collapse('#hideWhenBothSwitchOff', {
          toggle: false,
        });

        // 获取所有需要监听的开关元素
        const checkboxes = [
          document.getElementById('ds-activate'),
          document.getElementById('email-activate'),
        ];

        // 为每个开关添加事件监听器
        checkboxes.forEach((checkbox) => {
          checkbox.addEventListener('change', () => {
            // 检查是否有至少一个开关被选中
            const atLeastOneChecked = checkboxes.some(({ checked }) => checked);

            // 根据条件决定是显示还是隐藏目标DIV
            const operation = atLeastOneChecked ? 'show' : 'hide';

            // 调用Collapse实例的show()或hide()方法
            collapsible[operation]();
          });
        });

        // 页面加载后，根据初始状态执行一次检查
        document.addEventListener('DOMContentLoaded', () => {
            const atLeastOneChecked = checkboxes.some(({ checked }) => checked);
            const operation = atLeastOneChecked ? 'show' : 'hide';
            collapsible[operation]();
        });
    </script>
</body>
</html>

注意事项与总结

  • Bootstrap版本：本教程基于Bootstrap 5.x版本。如果您使用的是旧版本，J*aScript API可能会有所不同。
  • J*aScript加载顺序：确保您的自定义J*aScript代码在Bootstrap的J*aScript文件（bootstrap.bundle.min.js）之后加载，因为bootstrap.Collapse对象需要Bootstrap库的支持。
  • 初始状态处理：在J*aScript代码中，我们特意添加了DOMContentLoaded事件监听器，以确保页面加载时，目标DIV的显示状态能够正确反映初始的开关选中状态。
  • 可扩展性：如果您需要控制更多开关，只需将它们添加到checkboxes数组中即可，无需修改核心逻辑。Array.prototype.some()方法能够优雅地处理任意数量的开关。
  • 可访问性：Bootstrap的Collapse组件本身提供了良好的可访问性支持。当元素隐藏时，aria-expanded属性会自动更新，告知屏幕阅读器该元素的状态。

通过结合Bootstrap的强大组件和灵活的J*aScript，我们可以轻松实现复杂的UI交互逻辑。这种方法不仅功能强大，而且代码结构清晰，易于维护和扩展。

以上就是利用J*aScript和Bootstrap实现多开关联动隐藏元素的详细内容，更多请关注其它相关文章！


# 组中  # 黑帽seo入门培训  # seo工具app 广告  # 广东seo网站推广排名  # seo是怎么优化网站的  # 南京营销推广几种类型  # 科技seo软文推广  # 高端品牌网站怎么做推广  # 网站付费推广zgd云7速7捷  # 宠物店该怎么营销推广  # 网站优化及推广怎么做好  # 都未  # 单选框  # 您的  # 见性  # 运算符  # css  # 复选框  # 回调  # 加载  # 表单  # htm  # switch  # ai  # 回调函数  # npm  # bootstrap  # js  # html  # java  # javascript 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： Excel Power Pivot如何处理XML数据源 构建高级数据模型  晋江读书网页版在线登录 晋江读书电脑版官网  J*aScript中向JSON对象添加新属性的正确姿势  c++中为什么推荐使用using替代typedef_c++现代化类型别名  CSS图片焦点样式实现教程：理解与应用tabindex属性  CSS子选择器：如何区分并样式化嵌套列表的子层级  谷歌邮箱注册显示错误Gmail服务器异常与延迟处理  Lar*el 递归关系中排除指定分支的教程  高德地图总提示网络异常怎么办 高德地图离线导航设置与网络排查方法  汽水音乐在线解析 汽水音乐在线解析入口  优化Log4j2控制台输出性能：解决异步日志瓶颈  在Go开发中优雅管理ListenAndServe进程：GoSublime集成方案  poki网页游戏推荐_poki免费游戏平台入口  css链接悬停下划线样式如何自定义_使用::after结合content和transition  动漫岛观看全网网 动漫岛在线正版动漫入口  漫蛙2网页版漫画入口 漫蛙漫画在线官方登录  包子漫画官方网站阅读入口-包子漫画在线漫画官网直达链接  React Router v6 教程：构建认证保护的私有路由与重定向策略  在VS Code中配置和运行Dart程序的完整步骤  解决移动端滚动问题的overflow属性应用指南  2026年CSGO开箱网站推荐 CSGO开箱平台精选  Windows 11怎么彻底关闭定位_Windows 11服务中禁用Geolocation  支付宝如何设置安全保护_支付宝安全设置的全面教程  Win10双系统截图高效法 截屏快捷键速记【技巧】  抓大鹅无需下载版 抓大鹅秒玩版入口  uc浏览器网页版入口 uc浏览器网页版最新网址  Python类型检查：优化关联可选属性的Mypy推断策略  抖音未来赚钱的新趋势 2025年值得关注的变现风口分析  VS Code远程开发时如何处理文件权限问题  深入理解J*a合成构造器：何时以及为何阻止其生成  PHP中高效并行检查多链接状态的教程  铁路12306改签能改到更早的车次吗_铁路12306改签提前车次规则  深入理解与实现最大堆的Heapify过程：常见错误与修正  Lar*el如何正确地在控制器和模型之间分配逻辑_Lar*el代码职责分离与架构建议  c++如何实现一个简单的ECS框架_c++数据驱动设计与游戏开发  LINUX的I/O重定向是什么_深入理解LINUX中 >、>> 与 < 的区别  12306选座怎么选到商务座_12306商务座选择与配置说明  探索高级语言到C/C++的转译路径：以Go为例及内存管理策略  QQ邮箱登录平台入口 QQ邮箱网页版邮箱官方入口  Composer中的^和~符号代表什么_精通Composer版本号语义化约束  J*a最大堆Heapify方法修复：索引计算与边界条件深度解析  必由学官方平台入口 必由学在线课堂登录地址  Node.js 中使用 node-cron 实现定时 API 数据抓取与处理  TikTok国际版网页端快速入口 TikTok全球版短视频浏览教程  腾讯QQ邮箱登录入口_QQ邮箱官方网站使用地址  邮政快递单号查询入口 邮政快递物流信息在线查询入口  俄罗斯Yandex搜索引擎入口_Yandex官网免登录一键访问  CSS Flexbox与媒体查询：实现响应式布局中元素的并排与堆叠  夸克浏览器图书入口 夸克手机浏览器阅读入口  QQ邮箱正确登录入口_QQ邮箱官方网站使用地址 

上一篇：J*aScript模拟时钟指针校准：解决时间显示不准确问题
下一篇：如何在HTML中插入CSS样式_HTML内联样式与外部样式表引入

搜索