checkbox

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

createCheckbox

function createCheckbox(opts?: CheckboxOptions): HTMLElement

opts?: CheckboxOptions

复选框初始参数，结构为

interface CheckboxOptions {
    type?: string;
    label?: string;
    checked?: boolean;
    isImage?: boolean;
    imageHeight?: Number;
    checkedNode?: HTMLElement;
    uncheckedNode?: HTMLElement;
    onchange?: (this: HTMLInputElement, ev: Event) => any;
}

type?: string

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

label?: string

复选框的标签文本

checked?: boolean

初始是否选中

isImage?: boolean

是否为图片复选框

imageHeight?: Number

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

checkedNode?: HTMLElement

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

uncheckedNode?: HTMLElement

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

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

复选框改变时触发的事件

resolveCheckbox

function resolveCheckbox(container: HTMLElement): HTMLElement

container: HTMLElement

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

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

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

示例

<div id="checkbox-sample">
  <label data-checkbox data-type="fa-light" data-label="Checkbox Light"></label>
  <label data-checkbox data-checked data-label="Checkbox Regular"></label>
  <label data-checkbox data-type="fa-solid" data-label="Checkbox Solid"></label>
  <label data-checkbox>
    <code class="checked">Checked</code>
    <code class="unchecked">Unchecked</code>
  </label>
</div>

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

Checked Unchecked