EasyUI jQuery radiobutton widget

EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn how to design a Radiobutton using jQuery EasyUI. The Radiobutton widget is used to make a radio button that can be used to select the needed option. Only one option can be selected in a group.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<input class="easyui-radiobutton">

Properties:

width: It is the width of Radiobutton component to be made.
height: It is the height of Radiobutton component to be made.
value: It is the default value bound to the Radiobutton to be made.
checked: It defines if the Radiobutton is checked to be made.
disabled: It defines if to disable the Radiobutton to be made.
label: It is the label bound to the Radiobutton to be made.
labelWidth: It is the label width.
labelPosition: It is the label position. The possible values are 'before', 'after' and 'top'.
labelAlign: It is the label alignment. The possible values are 'left' and 'right'.

Event:

onChange: It fires when the value is changed.

Methods:

options: It returns the options object.
setValue: It sets the value for the Radiobutton.
disable: It disables the component.
enable: It enables the component.
check: It checks the component.
uncheck: It unchecks the component.
clear: It clears the 'checked' value.
reset: It resets the 'checked' value.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type="text/javascript" src="jquery.min.js"></script>  <script type="text/javascript" src="jquery.easyui.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.mobile.js"> </script>

Example:

HTML

<html>
<head>

  <!-- EasyUI specific stylesheets-->
  <link rel="stylesheet" 
        type="text/css" 
        href="themes/metro/easyui.css">

  <link rel="stylesheet"
        type="text/css"
        href="themes/mobile.css">

  <link rel="stylesheet"
        type="text/css"
        href="themes/icon.css">

  <!--jQuery library -->
  <script type="text/javascript"
          src="jquery.min.js">
  </script>

  <!--jQuery libraries of EasyUI -->
  <script type="text/javascript"
          src="jquery.easyui.min.js">
  </script>

  <!--jQuery library of EasyUI Mobile -->
  <script type="text/javascript"
          src="jquery.easyui.mobile.js">
  </script>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery radiobutton widget</h3>

  <form id="gfg">
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language" 
             value="HTML" 
             label="HTML">
    </div>
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language"
             value="JavaScript"
             label="JavaScript">
    </div>
    <div style="margin-bottom:20px">
      <input class="easyui-radiobutton" 
             name="language"
             value="jQuery"
             label="jQuery">
    </div>
  </form>
</body>
</html>

Output:

Reference: https://www.jeasyui.com/documentation/radiobutton.php

EasyUI jQuery radiobutton widget

Explore