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>