layui复选框全选,单选取消全选

在layui框架的基础上，某个地方需要全选或者取消全选这样的一个需求。

HTML代码区

<div class="layui-form-item">
    <label class="layui-form-label">可见班级</label>
    <div class="layui-input-block">
        <input type="checkbox"  name="" lay-skin="primary" id="class_all"  lay-filter="class_all" title="全选" value="(1)-(10)">
        <input type="checkbox"  name="" lay-skin="primary" class="class_one" lay-filter="class_one" title="水费" value="(1)">
        <input type="checkbox"  name="" lay-skin="primary" class="class_one" lay-filter="class_one" title="电费" value="(2)" disabled>

    </div>
</div>

layui JS部分调用（我使用的是全局法；不是局部调用）

<script>
    ;!function() {
        let form = layui.form;
        //委托人费用全选
        form.on('checkbox(class_all)', function(data){
            var a = data.elem.checked;
            if(a == true){
                $(".class_one").prop("checked", true);
                form.render('checkbox');
            }else{
                $(".class_one").prop("checked", false);
                form.render('checkbox');
            }

        });
        //委托人费用有一个未选中全选取消选中
        form.on('checkbox(class_one)', function(data){
            var item = $(".class_one");
            for(var i=0;i<item.length;i++){
                if(item[i].checked == false){
                    $("#class_all").prop("checked", false);
                    form.render('checkbox');
                }
            }
        });
    }()
    
</script>