Getting Started with JavaScript Toggle Botton Control

21 Nov 20232 minutes to read

This section explains briefly about how to create a Toggle Button in your application with JavaScript.

Control structure

The HTML checkbox element can be easily configured as Essential JavaScript Toggle Button control. The basic rendering of Essential JavaScript Toggle Button is achieved by using default functionality.

JavaScript Toggle Button structure.

JavaScript Toggle Button getting started.

Toggle Button Creation

Create an HTML file and paste the following template to HTML file for ejToggleButton creation.

  • HTML
    • <!DOCTYPE html>
<html>
<head>
    <title>Getting Started Essential JS</title>
    <!-- Style sheet for default theme (flat azure) -->
    <link href="http://cdn.syncfusion.com/28.1.33/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <!--Scripts-->
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/28.1.33/js/web/ej.web.all.min.js"></script>
    <!--Add custom scripts here -->
</head>
<body>
    <!--add Toggle Button element here-->
</body>
</html>

    Adding input Checkbox element for Toggle Button rendering.

  • HTML
    • <input type="checkbox" id="toggleButton"/>
<label for="toggleButton">Play</label>

    NOTE

    The advantages of using checkbox element and label element for the rendering of Toggle Button are as follows.

    Checkbox Element

    The HTML checkbox element is made as the base for Essential JavaScript Toggle Button, because to provide convenient look and feel while building forms and support basic methods and its states.

    Label Element

    A label element has to be explicitly associate a form control. A label is attached to a specific form control through the use of for attribute. The value of for attribute must be the same as the value of the id attribute of the form control. Clicking on the label or the control will activate the control in order to provide larger area of the control.

    Initialization of ToggleButton in script

  • JAVASCRIPT
    • $(function () {
        // simple control creation
        $("#toggleButton").ejToggleButton({
            size: "large"
        });
    });

    Output of above steps

    Label element in JavaScript Toggle Button.