LuLu UI pure版中文文档 » 单复选框

作为插件单独使用

单选框引入：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Radio.css">

复选框引入：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Checkbox.css">

模拟单选框

常规使用

单选项1 单选项2 单选项3

<input type="radio" id="radio1" name="radio">
<label for="radio1" class="ui-radio"></label><label for="radio1">单选项1</label>
<!-- .ui-radio元素是看到的单选框效果，需要紧跟在原生的radio控件的后面 -->

禁用效果

单选框禁用和原生单选框禁用方法一样，直接设置原生单选框的 disabled 属性即可：

单选项4 单选项5

<input type="radio" id="radio4" name="radioDisabled" disabled>
<label for="radio4" class="ui-radio"></label><label for="radio4">单选项4</label>
<input type="radio" id="radio5" name="radioDisabled" disabled checked>
<label for="radio5" class="ui-radio"></label><label for="radio5">单选项5</label>

模拟复选框

常规使用

复选项1 复选项2 复选项3

<input type="checkbox" id="checkbox1" name="checkbox">
<label for="checkbox1" class="ui-checkbox"></label><label for="checkbox1">复选项1</label>
<!-- .ui-checkbox元素就是肉眼所见的模拟复选框，需要紧跟在原生的 checkbox 控件的后面 -->

禁用态

禁用效果直接在原生的复选框元素上 disabled 属性就可以了：

复选项4 复选项5

<input type="checkbox" id="checkbox4" name="checkbox" disabled><label for="checkbox4" class="ui-checkbox"></label><label for="checkbox4">复选项4</label>
<input type="checkbox" id="checkbox5" name="checkbox" disabled checked>
<label for="checkbox5" class="ui-checkbox"></label><label for="checkbox5">复选项5</label>

还原为原生态

如果希望某些场景还是使用原生的单复选框，可以使用布尔属性 ui-visible，示意：

复选项6 单选框6

<input type="checkbox" id="checkbox6" ui-visible><label for="checkbox5" class="mr30 f14">复选项6</label>

<input type="radio" id="radio6" ui-visible><label for="radio6" class="ui-radio"></label><label for="radio6">单选框6</label>