使用layui进行快速开发时有时会遇到点击checkbox控件后再次点击的问题,在说明问题之前确保你有正确的引入layui的脚本文件以及脚本控件中的form控件。
checkbox、select、 radio控件依赖于layui的form模块,没有引入或正确引入只会导致这部分出现的位置出现空白现象,意思是,这几个控件被css隐藏了。使用框架进行布局开发,意味着你的布局语法要遵循框架的语法进行开发,举个例子来说明出现的问题吧
<input type="checkbox" value="1" id="all" title="全选" />
上面的代码仅仅是在html中任意位置都可以触发点击和取消的效果,不会因为标签嵌套出现问题的,这个代码只是最普通的使用layui对checkbox美化
<div class="layui-form-item">
<label class="layui-form-label">标签</label>
<div class="layui-input-block">
<!-- 存放input的盒子 -->
<input type="checkbox" id="all" title="全选" >
</div>
</div>
上面这张图是按照layui框架布局嵌套方式进行嵌套的,checkbox框也可以正常使用。下面这种嵌套方式开始出现问题了
<div class="layui-form-item">
<label class="layui-form-label">标签</label>
<div class="layui-input-block">
<label><input type="checkbox" id="all" title="全选" /></label>
</div>
</div>
经过测试 多个常用标签测试,layui的checkbox 只在label标签下会出现这种情况。