LuLu UI组件中文文档 » 单复选框

一、模拟单复选框

1. 单选框们

   单选项1 单选项2 单选项3 单选项4 单选项5

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

   禁用效果的代码(直接disabled属性控制)：

   <input type="radio" id="radio5" name="radio" disabled checked>
   <label for="radio5" class="ui-radio"></label><label for="radio5" class="ml10 mr30 f14">单选项5</label>

2. 复选框们

   复选项1 复选项2 复选项3 复选项4 复选项5

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

   禁用效果的代码(直接disabled属性控制)：

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

3. 如何使用？

   基本上，就拷贝上面的HTML代码到项目中，就可以了，比传统元素控件就多了个label元素（.ui-radio/.ui-checkbox的那个label元素）而已。

   如果需要兼容IE8，则需要引入相关JS，类似下面代码，直接引入即可。

   if (!window.addEventListener) {
       require.async('common/ui/Radio');
       require.async('common/ui/Checkbox');
   }

   而IE9+浏览器不需要任何JS。

4. 实现原理

   IE9+使用CSS3选择器:checked伪类精准控制单复选框的状态。

   而IE7,IE8通过JS同步[checked]属性，配合属性选择器和相邻选择器实现效果，开发时候，只需要关心单选框、复选框本身就可以了，例如：

   $(radio).click(function() {});
   $(checkbox).click(function() {});

   唯一需要注意的，就是我们如果手动通过JS修改单复选框的checked状态（非点击行为修改），则我们需要对元素radio/checkbox元素使用$().propMatch()方法同步一下，propMatch翻译一下就是“属性匹配”的意思。

   如果引入了Enhance.js，亦可以使用$().refresh()刷新与匹配。

二、作为插件独立使用

如果不需要兼容IE8浏览器，直接引入CSS即可。单选框引入：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Radio.css">

复选框引入：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Checkbox.css">

如果需要兼容IE8浏览器，还需要加载JS文件（jquery文件略）：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Radio.js"></script>
<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Checkbox.js"></script>

直接加载就好了，无需任何初始化。

单独使用Demo演示