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