Es5 getting started in EJ2 JavaScript Radio button control

2 Jun 202312 minutes to read

The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.

Control Initialization

The Essential JS 2 JavaScript controls can be initialized by using either of the following ways.

  • Using local script and style references in a HTML page.
  • Using CDN link for script and style reference.

Using local script and style references in a HTML page

Step 1: Create an app folder quickstart for getting started.

Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

Syntax:

Dependency Script: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js

Control Script: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js

Dependency Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\styles\material.css

Control Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css

Example:

Dependency Script: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\dist\global\ej2-base.min.js

Control Script: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-buttons\dist\global\ej2-buttons.min.js

Dependency Styles: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-base\styles\material.css

Control Styles: C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-buttons\styles\material.css

The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file.

Scripts: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js

Styles: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific controls. This web tool is useful to combine the required control scripts and styles in a single file.

Step 3: Create a folder ~/quickstart/resources and copy/paste the global scripts and styles from the above installed location to ~/quickstart/resources/package corresponding package location.

Step 4: Create a HTML page (index.html) in ~/quickstart/index.html location and add the Essentials JS 2 script and style references.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Essential JS 2</title>
        <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
        <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
        <!-- Essential JS 2 RadioButton's material theme (Control Styles) -->
        <link href="resources/buttons/material.css" rel="stylesheet" type="text/css"/>

        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
        <!-- Essential JS 2 RadioButton's global script (Control Script) -->
        <script src="resources/buttons/ej2-buttons.min.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
</html>

Step 5: Now, add the RadioButton element and initiate the Syncfusion Javascript RadioButton control in the ~/quickstart/index.html by using following code

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
          <title>Essential JS 2</title>
          <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
          <link href="resources/base/material.css" rel="stylesheet" type="text/css"/>
          <!-- Essential JS 2 RadioButton's material theme (Control Styles) -->
          <link href="resources/buttons/material.css" rel="stylesheet" type="text/css"/>

          <!-- Essential JS 2 Base's global script (Dependency Script) -->
          <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
          <!-- Essential JS 2 RadioButton's global script (Control Script) -->
          <script src="resources/buttons/ej2-buttons.min.js" type="text/javascript"></script>
      </head>
       <body>
            <!--element which is going to render-->
            <input id="element" type="radio"/>
            <script>
                // Initialize RadioButton control.
                var radiobutton = new ej.buttons.RadioButton({ label: 'Default' });

                // Render initialized RadioButton.
                radiobutton.appendTo('#element');
            </script>
       </body>
  </html>

Step 6: Now, run the index.html in web browser, it will render the Syncfusion JavaScript RadioButton control.

Step 1: Create an app folder quickstart for getting started.

Step 2: The Essential JS 2 control’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Dependency Script: https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Control Script: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Dependency Styles: https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/styles/material.css

Control Styles: https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Script: https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js

Styles: https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css

Step 3: Create a HTML page (index.html) in ~/quickstart/index.html location and add the CDN link references. Now, add the RadioButton element and initiate the Syncfusion Javascript RadioButton control in the index.html by using following code.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
                
        <title>Essential JS 2</title>

        <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
        <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

        <!-- Essential JS 2 RadioButton's material theme (Control Styles) -->
        <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>

        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

        <!-- Essential JS 2 RadioButton's global script (Control Script) -->
        <script src="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>

   <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
   <body>
       <!--element which is going to render-->
        <input id="element1" type="radio"/>
        <input id="element2" type="radio"/>
        <script>
          ej.base.enableRipple(true);

          // Initialize RadioButton control.
          var radiobutton = new ej.buttons.RadioButton({ label: 'Option 1', name: 'default'});
          // Render initialized RadioButton.
          radiobutton.appendTo('#element1');

          radiobutton = new ej.buttons.RadioButton({ label: 'Option 2', name: 'default'});
          radiobutton.appendTo('#element2');
        </script>
   </body>
  </html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

Step 4: Now, run the index.html in web browser, it will render the Syncfusion JavaScript RadioButton control.

Change the RadioButton state

The Essential JS 2 RadioButton contains 2 states visually, they are as follows:

  • Checked
  • Unchecked

The RadioButton checked property is used to handle the checked and unchecked state. In the checked state an inner circle will be added to the visualization of RadioButton.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
                
        <title>Essential JS 2</title>

        <!-- Essential JS 2 Base's material theme (Dependency Styles) -->
        <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>

        <!-- Essential JS 2 RadioButton's material theme (Control Styles) -->
        <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>

        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

        <!-- Essential JS 2 RadioButton's global script (Control Script) -->
        <script src="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>

        <link href="styles.css" rel="stylesheet">
   <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
   <body>
       <!--element which is going to render-->
        <input type="radio" id="radiobutton1"/>
        <input type="radio" id="radiobutton2"/>
        <script>
            ej.base.enableRipple(true);

            //checked state.
            var radiobutton = new ej.buttons.RadioButton({ label: 'Option 1', name: 'state', checked: true });
            radiobutton.appendTo('#radiobutton1');

            //unchecked state.
            radiobutton = new ej.buttons.RadioButton({ label: 'Option 2', name: 'state' });
            radiobutton.appendTo('#radiobutton2');
        </script>
   </body>
  </html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}

See Also