layui 探索更改多个checkbox的选中值 checked状态

在网上目前没有看到有人分享这些东西，我以为互联网是个非常需要分享的地方，所以将我的经验分享出来供大家参考。

需求：

在选中一个下拉框的时候，更改另一个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');
    });
});

layui 探索更改多个checkbox的选中值 checked状态

相关推荐