Home > Article > Web Front-end > How to add a boot toggle using JavaScript?
How to add a boot toggle using JavaScript?
- WBOYforward
- 2023-08-25 20:05:06625browse
The Bootstrap library provides users with many features to make their coding experience smoother. One such feature that users can select is a toggle switch. One of its useful features is the toggle switch, which enables users to add components that can switch between two states such as on and off.
Boot switch
Cascading Style Sheets (CSS) Framework Bootstrap is a toolkit that makes creating websites easier and more standards-compliant. It can be used with JavaScript to create responsive user interfaces. A simple Bootstrap toggle switch component is used to select one of the two available alternatives. Often used as an on/off switch.
method
In this article we will look at two different ways to add a boot toggle using JavaScript. They are as follows -
Use bootstrapToogle() method
Use JavaScript methods toggleOn() and toggleOff()
Method 1: Use BootstrapToogle() method
Toggle Bootstrap elements is done using the built-in data-toggle attribute. In this case, the task is performed using the bootstrapToggle() method. You can use the bootstrapToggle() method to toggle the switch. When the user clicks on the checkbox while the switch is in the disabled state, it switches to the enabled state. The bootstrapToggle() method toggles a checkbox to a disabled state if it is currently enabled.
Example
Here is the complete code we will 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: Use JavaScript methods toggleOn() and toggleOff()
It is also possible to flip the switch using separate buttons that, when clicked, execute JavaScript functions. We can use JavaScript code to turn the switch on or off based on its previous state. Here, the toggleOff() method turns off the switch, while the toggleOn() method turns the switch on.
Example
Here is the complete code we will 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>
in conclusion
In this article, we learned how to add a bootstrap toggle using JavaScript. We looked at two ways to accomplish this task. We first saw how to do this using the bootstrapToggle() method, and later we also saw how to use the toggleOn() and toggleOff() methods to achieve the same effect.
The above is the detailed content of How to add a boot toggle using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!