如何使用 JavaScript 添加引导程序切换开关？

Bootstrap 切换开关是一个简单的组件，用于激活两个给定选项之一。通常用作开/关按钮。

CSS 框架是一个库，允许使用级联样式表语言进行更简单、更符合标准的 Web 设计。 Bootstrap 4 是一种广泛使用的 CSS 框架，Web 开发人员使用它来构建用户友好的交互式 Web 应用程序。 Bootstrap 与 JavaScript 一起有助于开发响应式用户界面。

方法：

• Bootstrap 有一个内置的 data-toggle 属性，用于切换 Bootstrap 元素。
• 这里 bootstrapToggle() 方法用于执行任务。 bootstrapToggle() 方法启用开关的切换。如果开关被禁用并且用户单击复选框，则它切换到启用状态。如果复选框处于启用状态，则 bootstrapToggle() 方法将其切换到禁用状态。

下面的代码片段演示了使用 JavaScript 的切换开关。

例子：

html

  

  
    
  
    
    
  
    
    
  
    

  

    
  
        
        
  
        
            $(function() {
                $('#toggle-one').bootstrapToggle({
                    on: 'Enabled',
                    off: 'Disabled'
                });
            })
        
    

  

输出：

替代方法：

• 也可以使用单独的按钮来切换开关，单击这些按钮时会触发 JavaScript函数。
• JavaScript函数根据开关的先前状态打开或关闭开关。
• 这里，toggleOn() 方法打开开关，而toggleOff() 方法关闭开关。

例子：

html

  

  
    
  
    
    
      
    
    
  
    

  

    
        
  
        
            On Button
        
  
        
            Off Button
        
  
    
    
        function toggleOn() {
            $('#toggle-trigger').bootstrapToggle('on')
        }
        function toggleOff() {
            $('#toggle-trigger').bootstrapToggle('off')  
        }
    

  

输出：