How to add bootstrap toggle-switch using JavaScript ?

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. 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.