极客教程EasyUI jQuery checkbox widget
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个复选框。复选框小部件用于选择多个选择。每个选择都可以通过点击方框来启用。EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-checkbox">
属性:
- width: 用来设置复选框的宽度。
- height: 用来设置复选框的高度。
- value。它用于设置复选框的默认值。
- checked。它用于复选框被选中。
- disabled:它用于禁用该复选框。
- label。复选框的标签边界。
- labelWidth：用于设置标签宽度。
- labelPosition。它用于设置标签的位置。
- labelAlign：它用于设置标签的对齐方式。
事件:
- onChange。当检查的值被改变时，它就会发生。
方法:
- options :它返回选项对象。
- setValue : 它设置复选框的值。
- disable : 它使复选框组件失效。
- enable : 启用复选框组件。
- check : 它检查复选框。
- uncheck : 它取消对复选框的检查。
- clear : 它清除了该值。
- reset : 它重置了数值。
CDN链接：首先，添加你的项目需要的jQuery Easy UI脚本。
<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>
示例:
<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>
输出:
