ui-lib/lib/ui/checkbox.html

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

&lt;script type="text/javascript"&gt;
  window["lib-ui"].resolveCheckbox(document.querySelector("#checkbox-sample"), true);
&lt;/script&gt;</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>