How to add bootstrap toggle-switch using JavaScript ? Last Updated : 14 Sep, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery.min.js"> </script> <script src= "https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"> </script> <link href= "https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" 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= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src= "https://code.jquery.com/jquery.min.js"> </script> <script src= "https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"> </script> <link href= "https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" 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: Comment More infoAdvertise with us Next Article Bootstrap 5 Checks and radios Switches S Shreyasi_Chakraborty Follow Improve Article Tags : JavaScript HTML-Misc Bootstrap-4 Bootstrap-Misc Similar Reads How to hide Bootstrap modal with JavaScript? This article will tell us how the bootstrap executes when the .modal (modal window) gets closed. At some point of time, the modal window – whenever it gets opened (along with the class modal), it is going to get closed.As soon the modal has got finished, after being getting hidden from the user, the 2 min read How to create a radio button similar to toggle button using Bootstrap ? Toggle Buttons: The buttons that can change from one state to another, i.e. which can be toggled from on state to off state or vice-versa are called toggle buttons. For example: A particular switch in our house can either be on or off. This is a very good example of a real life toggle switch. The Wi 3 min read Bootstrap 5 Modal Via JavaScript Bootstrap 5 modal via JavaScript allows for the dynamic creation of models using JavaScript. Utilize Bootstrap's modal API to trigger modal display, content loading, and event handling for interactive and responsive user experiences.Prerequisite: Bootstrap 5 Modal Bootstrap 5 Modal Usage MethodsBoot 2 min read Bootstrap 5 Dropdowns Via JavaScript Bootstrap 5 Dropdowns can be triggered in two ways: via data attributes and JavaScript. When using JavaScript, you need to define a function that utilizes the predefined toggle() or show() method to control the dropdown from a button or link. Additionally, even with JavaScript, you must include the 4 min read Bootstrap 5 Checks and radios Switches Bootstrap5 Checks and radios Switches are used to transform the Checks and Radio Inputs into switches. They are transformed as .form-switch is added to the HTML div containing the input and the label. The prime difference between the checkbox and radio switch is the role attribute which is set to ra 3 min read Bootstrap 5 Collapse Via JavaScript Bootstrap 5 Collapse can be triggered using two ways using data attributes and using JavaScript. For using it with JavaScript, a new Bootstrap collapse object needs to be created. The show() and hide() predefined methods to attain basic handling of the collapse element via JavaScript. Prerequisite: 3 min read Like