Layui按钮点击改变按钮样式

WLS0723

已于 2023-08-05 09:39:17 修改

阅读量965

点赞数

文章标签： layui javascript 前端

于 2023-08-05 09:05:22 首次发布

本文链接：https://blog.csdn.net/WLS0723/article/details/132115506

版权

    <div style="width:100%;margin:0 auto">
        <form class="layui-form" style="margin-top:20px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">护理单元名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="UnitCareName" id="UnitCareName" lay-verify="required" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">选择病房</label>
                    <div class="layui-input-block">
                        @foreach (var item in ViewBag.SickList as List<Sickroom>)
                        {
                            <input type="button" class="layui-btn layui-btn-primary layui-border" style="margin-top:10px;margin-left:10px;width:100px" onclick="AlterBtnClass(this)" value="@item.SickroomName" id="@item.SickroomId" />
                        }
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" id="formDemo" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

function AlterBtnClass(button) {

            button.classList.toggle("layui-border-blue")//当前按钮有该样式删除否则新增该样式
            var SickIdList = []
            for (var i = 0; i < document.getElementsByClassName("layui-border-blue").length; i++) {
                SickIdList.push(Number(document.getElementsByClassName("layui-border-blue")[i].id))//获取有layui-border-blue样式的按钮将按钮内对应的的数据取出
            }
            $("#SickRoomIdList").val(SickIdList)
            console.log(SickIdList)
            return false;
        }