Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add bootstrap toggle-switch using JavaScript ?

  • Last Updated : 14 Sep, 2020

Bootstrap toggle-switch is a simple component used for activating one of the two given options. Commonly used as an on/off button.

The CSS framework is a library that allows for easier, more standards-compliant web design using the Cascading Style Sheets language. Bootstrap 4 is one such widely used CSS framework used by web developers for building user-friendly interactive web applications. Bootstrap along with JavaScript helps develop a responsive user interface. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Approach:

  • Bootstrap has an inbuilt data-toggle attribute that is used for toggling Bootstrap elements. 
  • Here bootstrapToggle() method is used for performing the task. The bootstrapToggle() method enables the toggling of the switch. If the switch is disabled and the user clicks the checkbox then it toggles to an enabled state. If the checkbox is in the enabled state then the bootstrapToggle() method toggles it to the disabled state. 

The code snippet below demonstrates a toggle switch using JavaScript.



Example:
 

html




<!DOCTYPE html>
<html>
  
<head>
  
    <link rel="stylesheet" href=
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">
  
    <script src=
    </script>
  
    <script src=
    </script>
  
    <link href=
         rel="stylesheet"/>
</head>
  
<body>
    <div class="container mt-5">
  
        <!--Initialize toggles with id toggle-one
            with JavaScript.-->
        <input type="checkbox" id="toggle-one">
  
        <script>
            $(function() {
                $('#toggle-one').bootstrapToggle({
                    on: 'Enabled',
                    off: 'Disabled'
                });
            })
        </script>
    </div>
</body>
  
</html>

Output:

Alternate approach:

  • The switch can also be toggled using individual buttons which when clicked trigger a JavaScript function.
  • The JavaScript function toggles on or toggles off the switch depending on the previous state of the switch. 
  • Here, the toggleOn() method toggles on the switch whereas toggleOff() method toggles off the switch. 

Example:

html




<!DOCTYPE html>
<html>
  
<head>
  
    <link rel="stylesheet" href=
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">
  
    <script src=
    </script>
      
    <script src=
    </script>
  
    <link href=
        rel="stylesheet"/>
</head>
  
<body>
    <div class="container mt-5">
        <input id="toggle-trigger" type="checkbox" 
            data-toggle="toggle">
  
        <button class="btn btn-success" onclick="toggleOn()">
            On Button
        </button>
  
        <button class="btn btn-danger" onclick="toggleOff()">
            Off Button
        </button>
  
    </div>
    <script>
        function toggleOn() {
            $('#toggle-trigger').bootstrapToggle('on')
        }
        function toggleOff() {
            $('#toggle-trigger').bootstrapToggle('off')  
        }
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!