Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add bootstrap toggle-switch using JavaScript?
The Bootstrap library provides a number of features to the user to make their coding experience smooth. One of such features which the user can choose from is the toggle-switch. The toggle-switch, one of its useful features, provides users the ability to add components which can switch between two states such as on and off.
Bootstrap Toggle-switch
The Cascading Style Sheets (CSS) framework Bootstrap is a toolkit that makes it simpler and more standards-compliant to create websites. It can be used, alongside JavaScript, to create a responsive user interface. The simple Bootstrap toggle-switch component is used to select one of the two available alternatives, frequently used as an on/off switch.
Approach
We are going to have a look at two different methods in this article to add bootstrap toggle-switch using JavaScript. They are as follows ?
Using bootstrapToggle() method
Using JavaScript methods toggleOn() and toggleOff()
Method 1: Using BootstrapToggle() Method
Toggling Bootstrap elements is done using the built-in data-toggle attribute. The task is carried out in this case using the bootstrapToggle() method. The switch can be toggled using the bootstrapToggle() method. When a user hits the checkbox when the switch is in the disabled state, it toggles to the enabled state. The bootstrapToggle() method toggles the checkbox to the disabled state if it is currently enabled.
Example
The following is the complete code which we are going to make use in this example ?
<!DOCTYPE html>
<html>
<head>
<title>How to add bootstrap toggle-switch using JavaScript?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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>
<h4>How to add bootstrap toggle-switch using JavaScript?</h4>
<div class="container mt-5">
<input type="checkbox" id="toggle-input">
</div>
<script>
$(function () {
$('#toggle-input').bootstrapToggle({
on: 'ON',
off: 'OFF'
});
})
</script>
</body>
</html>
Output
The above code will create a toggle switch that can be clicked to alternate between "ON" and "OFF" states. The switch will have the Bootstrap styling applied automatically.
Method 2: Using JavaScript Methods toggleOn() and toggleOff()
It is also possible to flip the switch using individual buttons that, when clicked, perform a JavaScript function. Depending on the switch's prior state, we can use JavaScript code to turn the switch on or off. Here, the toggleOff() method turns the switch off while the toggleOn() method turns it on.
Example
The following is the complete code which we are going to make use in this example ?
<!DOCTYPE html>
<html>
<head>
<title>How to add bootstrap toggle-switch using JavaScript?</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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>
<h4>How to add bootstrap toggle-switch using JavaScript?</h4>
<div class="container mt-5">
<input id="toggle-trigger" type="checkbox" data-toggle="toggle">
<br><br>
<button class="btn btn-success" onclick="toggleOn()">
Turn On
</button>
<button class="btn btn-danger" onclick="toggleOff()">
Turn Off
</button>
</div>
<script>
function toggleOn() {
$('#toggle-trigger').bootstrapToggle('on');
}
function toggleOff() {
$('#toggle-trigger').bootstrapToggle('off');
}
</script>
</body>
</html>
Output
This code will display a toggle switch with two separate buttons below it. Clicking the "Turn On" button will set the switch to the ON state, while clicking the "Turn Off" button will set it to the OFF state, regardless of the current toggle position.
Key Features
| Method | Control Type | Use Case |
|---|---|---|
| bootstrapToggle() | Direct click | User clicks the toggle itself |
| toggleOn() / toggleOff() | External buttons | Programmatic control via separate buttons |
Conclusion
In this article we had a look at how one can add a bootstrap toggle-switch using JavaScript. We looked at two ways to accomplish this task - using the bootstrapToggle() method for direct interaction and using toggleOn()/toggleOff() methods for programmatic control via external buttons.
1K+ Views
