Change switch state using toggle method in EJ2 JavaScript Switch control
10 May 20232 minutes to read
This section explains about how to toggle between the switch states using toggle
method.
// Switch toggle.
var switchObj = new ej.buttons.Switch({ onLabel: 'ON', offLabel: 'OFF' });
switchObj.appendTo('#switch1');
switchObj.toggle();
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Switch</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/fabric.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/bootstrap.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<input type="checkbox" id="switch1">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
.e-switch-wrapper {
margin-top: 18px;
}
Switch triggers
change
event on every state stage to perform custom operations.