資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 新增 Bootstrap 切換開關？
Bootstrap 庫為使用者提供了許多功能，使他們的編碼體驗更加流暢。使用者可以選擇的功能之一是切換開關。切換開關，作為其有用功能之一，使使用者能夠新增可以在兩種狀態（例如開和關）之間切換的元件。
Bootstrap 切換開關
層疊樣式表 (CSS) 框架 Bootstrap 是一個工具包，它使建立網站變得更簡單且更符合標準。它可以與 JavaScript 一起使用，以建立響應式使用者介面。簡單的 Bootstrap 切換開關元件用於選擇兩個可用選項之一。通常用作開關。
方法
在本文中，我們將瞭解兩種使用 JavaScript 新增 Bootstrap 切換開關的不同方法。它們如下所示：
使用 bootstrapToogle() 方法
使用 JavaScript 方法 toggleOn() 和 toggleOff()
方法 1：使用 BootstrapToogle() 方法
使用內建的 data-toggle 屬性來切換 Bootstrap 元素。在這種情況下，使用 bootstrapToggle() 方法執行此任務。可以使用 bootstrapToggle() 方法切換開關。當用戶在開關處於停用狀態時點選複選框時，它會切換到啟用狀態。如果當前已啟用，則 bootstrapToggle() 方法會將複選框切換到停用狀態。
示例
以下是我們將在本示例中使用的完整程式碼：
<!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>
方法 2：使用 JavaScript 方法 toggleOn() 和 toggleOff()
也可以使用單獨的按鈕來翻轉開關，這些按鈕在被點選時執行 JavaScript 函式。根據開關的先前狀態，我們可以使用 JavaScript 程式碼開啟或關閉開關。這裡，toggleOff() 方法關閉開關，而 toggleOn() 方法開啟開關。
示例
以下是我們將在本示例中使用的完整程式碼：
<!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>
結論
在本文中，我們瞭解瞭如何使用 JavaScript 新增 Bootstrap 切換開關。我們查看了完成此任務的兩種方法。我們首先了解了如何使用 bootstrapToggle() 方法來實現，然後我們還了解了如何使用 toggleOn() 和 toggleOff() 方法獲得相同的效果。
1K+ 瀏覽量
