EasyUI jQuery checkbox widget - GeeksforGeeks

23 Apr, 2021
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
EasyUI
EasyUI-Form
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?