mui checkbox用法

mui的checkbox的用法，官方文档这么说：

DOM结构

<div class="mui-input-row mui-checkbox">
  <label>checkbox示例</label>
  <input name="checkbox1" value="Item 1" type="checkbox" checked>
</div>

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

<div class="mui-input-row mui-checkbox mui-left">
  <label>checkbox左侧显示示例</label>
  <input name="checkbox1" value="Item 1" type="checkbox">
</div>

使用问题

在使用的过程中，我们会发现点击整行，会触发复选框勾选动作，但是如果直接点击checkbox的input标签事没有任何反应的。有些网友会说“不会呀，我测试使用的时候点击是正常的呀？”，笔者只想说，幼稚，天真。

让笔者帮你们好好分析可以的理由：

1、你们屏幕很小，导致点击复选框，其实就是在点击label标签

2、你们屏幕很大，但是复选框所在的容器很小，同样会像1阐述的那样

3、。。。

问题解决

说了这么多，真累

直接说怎么解决吧！

要想解决，就要先知道怎么才能达到我们预期的效果。

显然，我说过，点击label的时候是会触发checkbox选中的效果，这个笔者也从mui.js的8370行的代码中验证过了。

解决方案其实是曲线救国。

直接上代码和效果图再讲解：

代码

		<div class="mui-content" style="background: purple!important;margin-top: 15%;">
			<div class="mui-row" style="height: 100px;background-color: orangered;">
				<div class="mui-col-xs-2">
					<div class="mui-input-row mui-checkbox condition-item" style="background-color: white;height: 100px;margin: 0;">
						<label style="background-color:transparent;position: absolute;z-index: 100;height: 100%;"></label>
						<input name="checkbox" type="checkbox" style="background-color: greenyellow;" checked="checked"  id="test-div">
					</div>
				</div>
				<div class="mui-col-xs-10">
					我是模拟label
				</div>
			</div>
		</div>

效果图

可以看到白色区域就是一整个勾选区域，这个区域是由mui原生的checkbox改装来的，其实就是让其中的label内容清空，然后覆盖整个白色区域，形成透明遮罩的效果。

可以看到红色区域是模拟的label，可以在这里头写自己的内容。

经过这样改造之后，点击白色区域任一未知，复选框都会被勾选，而点击红色区域就不会触发勾选的效果了，看到这边有没有觉得跟京东、淘宝的购物车页面很像，是的，笔者就是从这边得到启发的。