layui 复选框事件和原生上传

最新推荐文章于 2024-04-13 22:05:43 发布

你看，那人好像一条狗

最新推荐文章于 2024-04-13 22:05:43 发布

阅读量752

点赞数 2

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/m0_46541552/article/details/131225481

版权

layui 复选框事件

html

  <div class="layui-form-item">
      <label class="layui-form-label">复选框</label>
         <div class="layui-input-block">
         <input type="checkbox" title="全选" lay-filter="checkbox-all">
         <input type="checkbox" name="bm" title="wait" value="1" lay-filter="checkbox-one" checked>
         <input type="checkbox" name="bm" title="hello" value="2" lay-filter="checkbox-one">
         <input type="checkbox" name="bm" title="good" value="3" lay-filter="checkbox-one">
  </div>
</div>

layui 事件

 checkdedHcfw('checkbox-all', 'checkbox-one');
        function checkdedHcfw(checkboxAllfilter, checkboxOnefilter) {
            //全选被选中  其他都被勾选
            form.on('checkbox(' + checkboxAllfilter + ')', function (data) {
                var elem = data.elem;
                var parent = $(elem).parent();
                $(parent).children("input").each(function (i, e) {
                    var title = $(e).attr('title');
                    if (title != '全选') {
                        e.checked = data.elem.checked;
                    }
                });
                form.render('checkbox');
            });


            //有一个未选中全选取消选中
            form.on('checkbox(' + checkboxOnefilter + ')', function (data) {
                var elem = data.elem;
                var parent = $(elem).parent();
                var status = null;
                var allElem = {};
                $(parent).children("input").each(function (i, e) {
                    var title = $(e).attr('title');
                    if (title == '全选') {
                        allElem = e;
                    } else {
                        status = (status == null) ? e.checked : (status && e.checked);
                    }
                });

                if (allElem) {
                    $(allElem).prop("checked", status);
                }
                form.render('checkbox');
            });
        }

layui 不使用上传组件原生封装-建议使用layui 上传组件

  <div class="layui-form-item">
     <label class="layui-form-label">上传附件</label>
     <div class="layui-input-block upload-file-css">
         <button type="button" class="layui-btn layui-btn-normal">
             选择.pdf文件
         </button>
         <span style="display: none;"></span>
         <input type="file" name="zmclFile" accept=".pdf" class="layui-hide">

     </div>
 </div>

 /**
         * 上传绑定
         * */
        uploadFile('upload-file-css');
        function uploadFile(fileNameCss) {
            // debugger
            $("." + fileNameCss).each(function (index, element) {
                // element == this
                var $elm = $(element);
                $elm.find('button').on('click', function () {
                    $elm.find('input').trigger("click")
                });


                $elm.find('input').on('change', function (i, e) {
                    var file = $(this).get(0).files[0];
                    if (file && file.name) {
                        var $span = $elm.children('span');
                        $span.text(file.name);
                        $span.show();
                    }

                });


            });

        }