<div> <h1>checkbox</h1> <hr /> <p> 创建一个统一样式的复选框元素,或者解析转换页面上特定类型的 label 标签为复选框元素。 </p> <h2>createCheckbox</h2> <code>function createCheckbox(opts?: CheckboxOptions): HTMLElement</code> <h3>opts?: CheckboxOptions</h3> <p> 复选框初始参数,结构为 <pre>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; }</pre> </p> <h4>className?: string</h4> <p> 复选框的自定义 className </p> <h4>enabled?: boolean</h4> <p> 复选框默认是否可用 </p> <h4>name?: string</h4> <p> 复选框或单选框的 name </p> <h4>tabIndex?: Number</h4> <p> 复选框的 tabindex </p> <h4>type?: string</h4> <p> 复选框图标的样式,可选值目前有 <code>fa-regular</code>、<code>fa-light</code>、<code>fa-solid</code> </p> <h4>label?: string | HTMLElement</h4> <p> 复选框的标签文本,或者想要呈现的元素 </p> <h4>checked?: boolean</h4> <p> 初始是否选中 </p> <h4>imageHeight?: Number</h4> <p> 为图片复选框时的图片限制高度 </p> <h4>checkedNode?: HTMLElement</h4> <p> 为图片复选框时的选中时显示的元素 </p> <h4>uncheckedNode?: HTMLElement</h4> <p> 为图片复选框时的未选中时显示的元素 </p> <h4>customerAttributes?: { [key: string]: string }</h4> <p> 自定义属性,例如 <pre>{ 'data-id': 'xxxxxx', 'disabled': '' }</pre> </p> <h4>onchange?: (this: HTMLInputElement, ev: Event) => any</h4> <p> 复选框改变时触发的事件 </p> <h2>createRadiobox</h2> <code>function createRadiobox(opts?: CheckboxOptions): HTMLElement</code> <h3>opts?: CheckboxOptions</h3> <p> 单选框初始参数,结构如上 </p> <h2>resolveCheckbox</h2> <code>function resolveCheckbox(container?: HTMLElement, legacy?: boolean): HTMLElement</code> <h3>container?: HTMLElement</h3> <p> 将把此 HTML 元素,为 null 则把 document.body 下的所有 <code>label[data-checkbox]</code> 元素解析为复选框,<code>[data-id]</code> 为复选框元素的 id,包含 <code>[data-checked]</code> 时复选框默认选中。 </p> <p>当该元素无子元素时,<code>[data-type]</code> 同上述参数中的 <code>type?: string</code>,<code>[data-label]</code> 同上述参数中的 <code>label?: string</code>。 </p> <p>当该元素有子元素时,解析为图片复选框,class 为 <code>checked</code>、<code>unchecked</code> 的子元素将分别在选中与未选中时显示。</p> <h3>legacy?: boolean</h3> <p> 是否开启兼容模式,启用兼容模式时将试图匹配 <code>input[type="checkbox"]</code> 标签,与其周围的 label,将其转换为统一样式的复选框。 </p> <hr /> <h2>示例</h2> <pre><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></pre> <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> <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> </div>