本教程详细介绍了如何使用bootstrap的collapse组件和原生javascript，根据多个开关（checkbox）的选中状态来动态控制一个特定div元素的显示与隐藏。通过监听开关的`change`事件，并利用`array.prototype.some()`方法判断至少一个开关是否被选中，从而实现联动效果，提升用户界面的交互性。
在现代Web应用中，动态地根据用户交互调整页面元素的可见性是一种常见的需求。例如，当用户勾选或取消勾选某些选项时，可能需要显示或隐藏相关的配置区域或提示信息。本教程将指导您如何结合Bootstrap的Collapse组件和简单的JavaScript代码，实现一个高级的联动效果：当且仅当所有关联的开关（checkbox）都处于未选中状态时，隐藏一个特定的DIV元素。
场景描述
假设您有两个Bootstrap风格的开关按钮，每个开关控制着表单中一个独立的折叠区域（例如，两个不同的复选框组）。此外，页面上还有一个包含额外选项的段落或DIV，我们希望这个段落仅在两个开关都未被激活（即都未选中）时才隐藏。当至少一个开关被激活时，该段落应保持可见。
实现原理
我们将采用以下策略来实现这一功能：
HTML结构准备：确保所有相关的开关（input type=”checkbox” role=”switch”）和目标隐藏/显示DIV都有唯一的ID。目标DIV应包含Bootstrap的collapse类，但不需要data-bs-toggle和data-bs-target属性，因为我们将通过JavaScript手动控制其状态。JavaScript控制：使用bootstrap.Collapse的JavaScript API来实例化目标DIV的折叠组件，并禁用其默认的切换行为（toggle: false）。获取所有相关开关的引用。为每个开关添加change事件监听器。在事件监听器中，检查所有开关的选中状态。根据检查结果，调用collapsible.show()或collapsible.hide()方法来控制目标DIV的可见性。
详细实现步骤
1. HTML结构
首先，确保您的HTML文件引入了Bootstrap的CSS和JS文件。然后，构建以下核心HTML结构：
立即学习“Java免费学习笔记（深入）”；
Bootstrap多开关联动 // 在这里添加JavaScript代码开关控制示例
激活DS表单 激活Email表单这里是对后续选项的解释说明。
关键点说明：
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. JavaScript逻辑
现在，我们将添加JavaScript代码来处理开关的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]();});
代码解释：
new bootstrap.Collapse(‘#hideWhenBothSwitchOff’, { toggle: false });这行代码创建了一个bootstrap.Collapse实例，它绑定到ID为hideWhenBothSwitchOff的DIV。toggle: false 是关键，它告诉Bootstrap不要根据HTML中的data-*属性自动切换此组件的状态，而是完全由JavaScript代码来控制。const checkboxes = […]我们通过ID获取了两个开关的DOM元素，并将它们存储在一个数组中，方便后续迭代处理。checkboxes.forEach((checkbox) => { … });遍历checkboxes数组，为每个开关添加一个change事件监听器。这意味着每当任何一个开关的状态发生变化时，回调函数都会被执行。const atLeastOneChecked = checkboxes.some(({ checked }) => checked);这是实现联动逻辑的核心。Array.prototype.some()方法会遍历数组中的每个元素。({ checked }) => checked 是一个箭头函数，它解构出每个checkbox对象的checked属性，并返回其布尔值。如果数组中至少有一个开关的checked属性为true，那么some()方法就会返回true，atLeastOneChecked变量也将为true。如果所有开关都未选中，some()将返回false。const operation = atLeastOneChecked ? ‘show’ : ‘hide’;这是一个三元运算符，根据atLeastOneChecked的值，确定要执行的操作是’show’（显示）还是’hide’（隐藏）。collapsible[operation]();动态调用collapsible对象上的show()或hide()方法，从而控制hideWhenBothSwitchOff这个DIV的可见性。document.addEventListener(‘DOMContentLoaded’, () => { … });这个额外的事件监听器确保在页面完全加载后，会立即执行一次状态检查。这对于处理页面初始加载时开关的默认选中状态非常重要，以保证目标DIV的初始可见性是正确的。
完整代码示例
将上述HTML和JavaScript代码整合在一起，您将得到一个功能完整的示例：
Bootstrap多开关联动隐藏元素 /* 可选：为开关添加一些基本样式，如果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%; }// 获取目标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](); });开关控制示例
激活DS表单 激活Email表单这里是对后续选项的解释说明。
注意事项与总结
Bootstrap版本：本教程基于Bootstrap 5.x版本。如果您使用的是旧版本，JavaScript API可能会有所不同。JavaScript加载顺序：确保您的自定义JavaScript代码在Bootstrap的JavaScript文件（bootstrap.bundle.min.js）之后加载，因为bootstrap.Collapse对象需要Bootstrap库的支持。初始状态处理：在JavaScript代码中，我们特意添加了DOMContentLoaded事件监听器，以确保页面加载时，目标DIV的显示状态能够正确反映初始的开关选中状态。可扩展性：如果您需要控制更多开关，只需将它们添加到checkboxes数组中即可，无需修改核心逻辑。Array.prototype.some()方法能够优雅地处理任意数量的开关。可访问性：Bootstrap的Collapse组件本身提供了良好的可访问性支持。当元素隐藏时，aria-expanded属性会自动更新，告知屏幕阅读器该元素的状态。
通过结合Bootstrap的强大组件和灵活的JavaScript，我们可以轻松实现复杂的UI交互逻辑。这种方法不仅功能强大，而且代码结构清晰，易于维护和扩展。
以上就是利用JavaScript和Bootstrap实现多开关联动隐藏元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585840.html
微信扫一扫 
支付宝扫一扫 
