使用方式

<link rel="stylesheet" href="/components/style/checkbox.css" type="text/css" />
<script defer src="/components/js/checkbox.js" type="text/javascript"></script>

单个复选框

<label class="st_checkbox" st-model="checkboxSigle" change="checkboxSigleChange">
  <span class="st_checkbox_input">
    <span class="st_checkbox_inner"></span>
    <input type="checkbox" class="st_checkbox_original" />
  </span>
  <span class="st_checkbox_label">选项一</span>
</label>

复选框组

<div class="st_checkbox_group" st-model="checkList" change="checkListChange">
  <label class="st_checkbox">
    <span class="st_checkbox_input">
      <span class="st_checkbox_inner"></span>
      <input type="checkbox" class="st_checkbox_original" index="1" />
    </span>
    <span class="st_checkbox_label">选项一</span>
  </label>
  <label class="st_checkbox">
    <span class="st_checkbox_input">
      <span class="st_checkbox_inner"></span>
      <input type="checkbox" class="st_checkbox_original" index="2" />
    </span>
    <span class="st_checkbox_label">选项二</span>
  </label>
  <label class="st_checkbox">
    <span class="st_checkbox_input">
      <span class="st_checkbox_inner"></span>
      <input type="checkbox" class="st_checkbox_original" index="3" />
    </span>
    <span class="st_checkbox_label">选项三</span>
  </label>
  <label class="st_checkbox">
    <span class="st_checkbox_input is_disabled">
      <span class="st_checkbox_inner"></span>
      <input type="checkbox" disabled class="st_checkbox_original" index="4" />
    </span>
    <span class="st_checkbox_label">选项四</span>
  </label>
</div>

属性

属性	说明	类型	可选值	默认值
st-model	数据绑定	string	-	-
change	输入值变化回调方法	string	-	-
disabled	是否禁用	-	-	-