Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 follows −
Using bootstrapToogle() method
Using JavaScript methods toggleOn() and toggleOff()
Method 1: Using BootstrapToogle() 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>
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">
<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>
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. We first saw how one can use the bootstrapToggle() method to do so and later on we also saw how we can use the toggleOn() and toggleOff() methods to get the same effect.
1K+ Views
