在网上目前没有看到有人分享这些东西,我以为互联网是个非常需要分享的地方,所以将我的经验分享出来供大家参考。
需求:
在选中一个下拉框的时候,更改另一个checkbox的值。做一个联动。
实现:
监听select下拉框,当选中的时候相应更改型号。
代码:
<div class="layui-form-item">
<label class="layui-form-label"><i class="required-color">*</i>回收故障:</label>
<div class="layui-input-inline" id="rec_snag">
<select name="rec_snag" id="rec_snag_list" lay-filter="rec_snag">
<option>请选择</option>
{volist name="recoverySnag" id="vo"}
<option value="{$vo.id}" {if $vo.id==$data.rec_snag}selected="selected"{/if}>{$vo.name}</option>
{/volist}
</select>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 30px">
<label class="layui-form-label"><i class="required-color">*</i>回收型号:</label>
<div class="layui-input-inline">
<input lay-skin="primary" type="checkbox" id="checkall" name="type" lay-filter="allChoose" value="checkall"><span>全选</span>
</div>
<div class="layui-input-inline" id="rec_type">
{volist name="rec_typeData" id="vo"}
<?php
$condition = 0;
$temp = $data['rec_type'];
if (strstr(strval($temp),strval($vo['id']))){
$condition = 1;
}
?>
<input type="checkbox" class="layui-input-inline" name="rec_type[]" value="{$vo.id}" lay-skin="primary" lay-filter="rec_type" class="spec-select" title="{$vo.name}"
{if condition="$condition"} checked="true" {/if}>
{/volist}
</div>
</div>
js部分:
form.on('select', function(data) {
var obj = data.elem;
var type = $(obj).attr('lay-filter');
var value = data.value;
if (type == 'rec_snag' && value) {
JsPost('{:url("Recoverycategories/recgetitemInfo")}', {
id: value
}, function(res) {
if (res.status) {
var e = res;
var child = $("#rec_type input:checkbox[name='rec_type[]']");
child.each(function (index, item) {
item.checked = false;
});
child.each(function (index, item) {
var das = e.data;
for(var i=0;i<das.length;i++){
if(das[i].id == item.value){
item.checked =true;
}
}
});
form.render('checkbox');
}
});
}
});
//点击全选, 勾选
form.on('checkbox(allChoose)', function (data) {
var child = $("#rec_type input:checkbox[name='rec_type[]']");
child.each(function (index, item) {
item.checked = data.elem.checked;
});
form.render('checkbox');
});
});