如何使用JavaScript添加引导切换？

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

CSS框架是一个库，可使用级联样式表语言简化，更符合标准的网页设计。 Bootstrap 4是Web开发人员用来构建用户友好的交互式Web应用程序的此类广泛使用的CSS框架。 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')  
        }
    

  

输出：