checkbox

---

创建一个统一样式的复选框元素，或者解析转换页面上特定类型的 label 标签为复选框元素。

createCheckbox

function createCheckbox(opts?: CheckboxOptions): HTMLElement

opts?: CheckboxOptions

复选框初始参数，结构为

interface CheckboxOptions {
    className?: string;
    enabled?: boolean;
    name?: string;
    tabIndex?: Number;
    type?: string;
    label?: string;
    checked?: boolean;
    imageHeight?: Number;
    checkedNode?: HTMLElement;
    uncheckedNode?: HTMLElement;
    customerAttributes?: { [key: string]: string };
    onchange?: (this: HTMLInputElement, ev: Event) => any;
}

className?: string

复选框的自定义 className

enabled?: boolean

复选框默认是否可用

name?: string

复选框或单选框的 name

tabIndex?: Number

复选框的 tabindex

type?: string

复选框图标的样式，可选值目前有 fa-regular、fa-light、fa-solid

label?: string | HTMLElement

复选框的标签文本，或者想要呈现的元素

checked?: boolean

初始是否选中

imageHeight?: Number

为图片复选框时的图片限制高度

checkedNode?: HTMLElement

为图片复选框时的选中时显示的元素

uncheckedNode?: HTMLElement

为图片复选框时的未选中时显示的元素

customerAttributes?: { [key: string]: string }

自定义属性，例如

{
    'data-id': 'xxxxxx',
    'disabled': ''
}

onchange?: (this: HTMLInputElement, ev: Event) => any

复选框改变时触发的事件

createRadiobox

function createRadiobox(opts?: CheckboxOptions): HTMLElement

opts?: CheckboxOptions

单选框初始参数，结构如上

resolveCheckbox

function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement

container?: HTMLElement

将把此 HTML 元素，为 null 则把 document.body 下的所有 label[data-checkbox] 元素解析为复选框，[data-id] 为复选框元素的 id，包含 [data-checked] 时复选框默认选中。

当该元素无子元素时，[data-type] 同上述参数中的 type?: string，[data-label] 同上述参数中的 label?: string。

当该元素有子元素时，解析为图片复选框，class 为 checked、unchecked 的子元素将分别在选中与未选中时显示。

legacy?: boolean

是否开启兼容模式，启用兼容模式时将试图匹配 input[type="checkbox"] 标签，与其周围的 label，将其转换为统一样式的复选框。

---

示例

<div id="checkbox-sample">
  <!-- 1 -->
  <label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
  <!-- 2 -->
  <label data-checkbox data-checked data-label="Checkbox Regular"></label>
  <!-- 3 -->
  <label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label>
  <!-- 4 -->
  <label data-checkbox>
    <code class="checked">Checked</code>
    <code class="unchecked">Unchecked</code>
  </label>
  <!-- 5 -->
  <input id="check-status" type="checkbox"/>
  <label for="check-status">Label for Status</label>
</div>

<script type="text/javascript">
  window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
</script>