Open In App

EasyUI jQuery checkbox widget

Last Updated : 23 Apr, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to design a checkbox using jQuery EasyUI. The checkbox widget is used for selecting multiple choices. Each choice can be enabled by clicking on the boxes. 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.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-checkbox">

Properties:

  • width: It is used to set the width of checkbox.
  • height: It is used to set the height of checkbox.
  • value: It is used to set the default value of the checkbox.
  • checked: It is used to the checkbox is checked.
  • disabled: It is used to disable the checkbox.
  • label: The label bound of the checkbox.
  • labelWidth: It is used to set the label width.
  • labelPosition: It is used to set the label position.
  • labelAlign: It is used to set the label alignment.

Events:

  • onChange: It fires when the checked value is changed.

Methods:

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

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

<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> 

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 checkbox widget</h3>
    
 <form id="gfg">
    <div style="margin-bottom:10px">
        <input class="easyui-checkbox" 
               name="language" 
               value="HTML" 
               label="1st:">
    </div>
    <div style="margin-bottom:10px">
        <input class="easyui-checkbox" 
               name="language" 
               value="JavaScript" 
               label="2nd:">
    </div>
    <div style="margin-bottom:10px">
        <input class="easyui-checkbox" 
               name="language"
               value="jQuery" 
               label="3rd:">
    </div>
</form>
</body>
</html>


Output:

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



Previous Article
Next Article

Similar Reads

How to design checkbox selection for webpage using jQuery EasyUI ?
EasyUI is a 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 to design single and multiple select checkboxes using jQuery EasyUI plugin. Downloads for
3 min read
EasyUI jQuery messager 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 messager using jQuery EasyUI. messager widget provide different styles of
2 min read
EasyUI jQuery Form 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 form using jQuery EasyUI. Form provides various methods to perform actions
3 min read
EasyUI jQuery progressbar widget
In this article, we will learn how to design a progress bar widget using the jQuery Easy UI progress bar. The component can be created from HTML markup or programmatically. 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 mob
2 min read
EasyUI jQuery sidemenu 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 sidemenu using jQuery EasyUI. The sidemenu is used for context vertical me
2 min read
EasyUI jQuery tooltip widget
In this article, we will learn how to design a tooltip widget using jQuery EasyUI. 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. Download EasyUI for jQuery: https://
2 min read
EasyUI jQuery datalist 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 datalist using jQuery EasyUI. A datalist renders items in a list. It is
2 min read
EasyUI jQuery Draggable widget
In this article, we will learn how to design a draggable widget using jQuery EasyUI. 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. The widget creates a draggable ele
3 min read
EasyUI jQuery menu 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 menu using jQuery EasyUI. The menu is usually used for context menus. It
3 min read
EasyUI jQuery pagination widget
In this article, we will learn how to design a pagination widget using jQuery EasyUI. The pagination widget allows the user to navigate data by pages. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Downloads for EasyUI for jQuery: https://www.jeasyui.com/download/index.phpSyntax: var a
2 min read