HTML代码:
<fieldset style="border:1px solid #2779aa;height:190px;width:100px;margin-left:15px">
<form id="indicatorsList" class="layui-form">
<div class="layui-form-item" style="height:190px;margin-bottom:0px;">
<div class="layui-input-block" style="height:28px;margin-left:20px;margin-top:8px">
<input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='fa' title="方案"/>
</div>
<div class="layui-input-block" style="height:28px;margin-left:20px;">
<input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='pqi' title="PQI"/>
</div>
<div class="layui-input-block" style="height:28px;margin-left:20px;">
<input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='pci' title="PCI"/>
</div>
<div class="layui-input-block" style="height:28px;margin-left:20px;">
<input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='rqi' title="RQI"/>
</div>
<div class="layui-input-block" style="height:28px;margin-left:20px;">
<input type="checkbox" lay-skin='primary' name='indicators' lay-filter='indicators' value='rdi' title="RDI"/>
</div>
</div>
</form>
</fieldset>
js代码:
layui.use(['layer', 'element', 'form'], function() { //独立版的layer无需执行这一句
var $ = layui.jquery,
layer = layui.layer,
form = layui.form,
element = layui.element; //独立版的layer无需执行这一句
form.on('checkbox(indicators)', function(data){
$("input[name='indicators']").prop("checked", false); //全部取消选中
$(this).prop("checked", true); //勾选当前选中的选择框
form.render('checkbox');
});
form.render('checkbox');
});