jQWidgets jqxCheckBox 完整参考

jQWidgets是一套基于jQuery的UI组件库，其中包含了jqxCheckBox控件，用于创建复选框控件。本文将提供该控件的完整参考文档。

引入

为了使用jqxCheckBox控件，您需要先引入jQuery和jQWidgets库。您可以通过以下方式引入：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- 引入jQWidgets样式文件 -->
<link rel="stylesheet" href="https://cdn.jqwidgets.com/ jqwidgets/4.5.3/jqwidgets/styles/jqx.base.css" type="text/css" />

<!-- 引入jQWidgets脚本文件 -->
<script src="https://cdn.jqwidgets.com/jqwidgets/4.5.3/jqxcore.js"></script>
<script src="https://cdn.jqwidgets.com/jqwidgets/4.5.3/jqxcheckbox.js"></script>

该代码片段中，您需要将其中的版本号改为您所需的版本号。

创建

您可以使用以下代码创建jqxCheckBox：

<div id="jqxCheckBox"></div>

$("#jqxCheckBox").jqxCheckBox({
    width: 120,
    height: 25,
    checked: true
});

该代码片段将在页面上创建一个宽120像素，高25像素，并且处于选中状态的jqxCheckBox控件。

属性

以下是可用的属性：

| 属性名 | 描述 | 类型 | | --- | --- | --- | | borderColor | 外框边框颜色 | string | | checked | 是否选中 | boolean | | disabled | 是否禁用 | boolean | | height | 控件高度 | number/string | | rtl | 是否从右到左显示 | boolean | | theme | 控件主题 | string | | width | 控件宽度 | number/string |

方法

以下是可用的方法：

| 方法名 | 描述 | | --- | --- | | check() | 将控件设为选中状态 | | disable() | 禁用控件 | | enable() | 启用控件 | | focus() | 使控件获得焦点 | | getChecked() | 获取当前控件的选中状态 | | toggle() | 切换控件选中状态 | | uncheck() | 将控件设为未选中状态 |

事件

以下是可用的事件：

| 事件名 | 描述 | | --- | --- | | checkedChanged | 当选中状态改变时触发 | | click | 当控件被点击时触发 | | disabled | 当控件被禁用时触发 | | enabled | 当控件被启用时触发 | | valueChanged | 当值改变时触发 |

您可以通过以下方式绑定事件：

$("#jqxCheckBox").on("click", function () {
    console.log("Clicked");
});

示例

以下是一个使用jqxCheckBox控件的示例：

<div id="jqxCheckBox"></div>

$("#jqxCheckBox").jqxCheckBox({
    width: 120,
    height: 25,
    checked: true
});

$("#jqxCheckBox").on("checkedChanged", function (event) {
    console.log("Checked: " + event.args.checked);
});

该代码片段创建了一个宽120像素，高25像素，并且处于选中状态的jqxCheckBox控件，并在选中状态改变时输出日志。