精华内容
下载资源
问答
  • Layui单选框必填限制

    2020-12-31 16:24:24
    layui单选框必选限制: <div class="layui-input-inline" style="width: 300px;"> <input type="radio" name="feesType" lay-verify="otherReq" value="QUERY" title="查询收费"> </div> //...

    Layui单选框必填限制:

    <div class="layui-input-inline" style="width: 300px;">
        <input type="radio" name="feesType" lay-verify="otherReq" value="QUERY" title="查询收费">
    </div>
    
    //自定义验证规则
    form.verify({
        otherReq: function(value,item){
    	    var $ = layui.$;
    	    var verifyName=$(item).attr('name'),
    	    verifyType=$(item).attr('type'),
    	    formElem=$(item).parents('.layui-form'),//获取当前所在的form元素,如果存在的话
    	    verifyElem=formElem.find('input[name='+verifyName+']'),//获取需要校验的元素
    	    isTrue= verifyElem.is(':checked'),//是否命中校验
    	    focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
    	    if(!isTrue || !value){
    		    //定位焦点
    		    focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
    		    //对非输入框设置焦点
    		    focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
    			focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
    			}).focus();
    			return '必填项不能为空';
    		}
    	}
    });

     

    展开全文
  • layui单选框事件

    千次阅读 2019-07-15 10:40:27
    前端样式 <div class="layui-input-block" id="IsPurchased"> <input type="radio" id="s" name="addtest" value="1" title="是" lay-filter="aaa"/> <input type="radio...

    前端样式

    <div class="layui-input-block" id="IsPurchased">
                    <input type="radio" id="s" name="addtest" value="1" title="是" lay-filter="aaa"/>
                    <input type="radio" id="f" name="addtest" value="0" title="否" lay-filter="aaa"/>
                </div>
    

    js

    • 设置默认选中
    $(function () {
        var test=`{$a[test_status]}`;
        if (test==1){
            $('#s').attr('checked','checked');
        } else {
            $('#f').attr('checked','checked');
            $('#answernum').hide();
            $('#borderlines').hide();
        }
    })
    
    • 设置选中事件
    layui.use('form', function () {
        var form = layui.form;
    
        form.on('radio(aaa)', function (data) {
            if ($('#IsPurchased input[name="addtest"]:checked ').val() == "1") {
                $('#answernum').show();
                $('#borderlines').show();
            }
            else {
                $('#answernum').hide();
                $('#borderlines').hide();
            }
            form.render();
        });
    });
    
    展开全文
  • layui单选框去掉选中状态

    千次阅读 2020-06-06 16:17:57
    //首先把页面初始化的已选中单选框添加一个自定义属性xxx $(":radio").each(function(){ if($(this).prop("checked")){ $(this).attr("checkdata","checkdata"); } }); //$('#formTest').on('click','.layui-...
    //首先把页面初始化的已选中单选框添加一个自定义属性xxx
            $(":radio").each(function(){
                if($(this).prop("checked")){
                    $(this).attr("checkdata","checkdata");
                }
            });
    //$('#formTest').on('click','.layui-anim.layui-icon',function () {
    //根据表单id formTest添加一个动态绑定的单击事件,如果不动态绑定,form.render("radio")页面重新渲
    //染之后,绑定的事件会被删除,如果页面绑定的有其他交互事件请测试一遍,防止事件不起作用
    //下面的name=orderPlaystyle,name=orderPump是因为有两个单选框分组,如果有多个分组你也要复制成多个
    $('#formTest').on('click','.layui-anim.layui-icon',function () {
                var radioDOM=$(this).parent().parent().find("[title="+$(this).parent().find("div").text()+"]");
                if($(radioDOM).attr("name")=="orderPlaystyle"){
                    if(typeof($(radioDOM).attr("checkdata"))=="undefined"){
                        $(":radio[name=orderPlaystyle]").removeAttr("checkdata");
                        $(radioDOM).attr("checkdata","checkdata");
                    }else{
                        $(":radio[name=orderPlaystyle]").removeAttr("checkdata");
                        $(radioDOM).prop("checked",false);
                        form.render("radio");
                    }
                }else  if($(radioDOM).attr("name")=="orderPump"){
                    if(typeof($(radioDOM).attr("checkdata"))=="undefined"){
                        $(":radio[name=orderPump]").removeAttr("checkdata");
                        $(radioDOM).attr("checkdata","checkdata");
                    }else{
                        $(":radio[name=orderPump]").removeAttr("checkdata");
                        $(radioDOM).prop("checked",false);
                        form.render("radio");
                    }
                }
            });

    展开全文
  • layui 单选框 设置失败

    2020-02-17 14:42:58
    jq 获取、设置属性 html 自带属性请用prop() 自定义属性用 attr() 方法 要改为 prop('checked',true); 方法
    jq 获取、设置属性
    
    html 自带属性请用prop()
    
    自定义属性用 attr() 方法

    要改为 prop('checked',true); 方法

    展开全文
  • layui单选框渲染不出来

    千次阅读 2019-12-13 00:03:33
    div class="layui-form-item"> <label class="layui-form-label">设备类型</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" t...
  • layui修改单选框样式

    千次阅读 2020-12-08 14:06:18
    layui修改单选框样式 /*修改单选框样式*/ .layui-form-radioed i { width: 20px;/*保证添加样式后可点击范围不变 与改前宽度一致*/ color: rgba(0,0,0,0);/*隐藏原样式*/ } /*修改后的样式 可替换其他样式 本例...
  • 使用layui做表单处理的时候需要多次切换radio的选中项,使用attr("checked","checked");后再使用form.render()更新渲染发现不生效,刚开始以为是form.render()渲染的问题,后来发现改成 prop('checked',true);就好了...
  • 更改layui 默认单选框radio样式

    万次阅读 2019-09-29 22:40:10
    更改后效果展示: html: <div class="container"> ...form class="layui-form" action="">...自定义样式</h2> <div class="layui-form-item"> <div class="layui-...
  • $("input[name=sex][value=女]").attr(... layui 获取radio单选框选中的值 Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio 单选框 适用于 选择性别按钮网页等
  • layUI修改多选选中样式的颜色 1.原来的layui多选选中以后是绿色的 2.我们F12找到该复选的 i 标签,然后修改掉默认的改为你需要的颜色 3.这里我们在我们的css文件里加上下面代码,用 !important 替换掉以前的 ...
  • layui 多选框 单选框 下拉选项框都不显示问题 这是因为layui.css 里面有样式是.layui-form input[type=checkbox],.layui-form input[type=radio],.layui-form select{display:none} 初始值是设置成隐藏形式了。 ...
  • 好看的单选框样式

    2018-03-02 18:09:29
    好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式
  • 今天小编就为大家分享一篇layui 实现自动选择radio单选框(checked)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 颜色变成灰色。并且鼠标碰上去是红色的禁用图标 ...div class="layui-form-item"> <label class="layui-form-label wide"><i class="redstar">*</i>定时公布答案与奖品</label> ...
  • 错误代码如下:坑大坑这是改这是改完后的代码!只是把form 标签 把table 也括起来了!求大佬解答
  • HTML页面单选框(使用了layui样式): <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block" id="upSex"> <input type=...
  • 版权声明:本文为CSDN博主「啦啦啦晨啦啦」的原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_41517724/article/details/93746558 ...
  • 依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能) 在一个容器中设定 class=“layui-form”...样式无效的原因就在于单选按钮没有置于layui-for...
  • layui ui框架笔记

    2021-07-13 11:03:07
    使用 1.概述 4. 图标 容器标签 加上class  第二种使用方式 5 按钮 原始按钮 默认按钮 ...layui.use([‘jquery’],function () { var $=layui.jquery;...$(".layui-btn").click(function () {
  • 开发项目过程种发现layui数据表格自带的单选框功能,切换页回来后已选择的radio会消失的问题。于是想到了一个解决方案,解决了该问题 解决方案 <table id="test" class="layui-hide" lay-filter="test"></...
  • 单选框按钮在显示的时候无法直接根据value判断,保存获取其值也是单纯根据checked属性获取,如果checked属性写死,那么就算手动切换了,也是保存的写死的那个值,所以radio按钮赋值需要特殊对待。for(var name in ...
  • layui表格中,行点击事件同时选中行前的单选框。 //表格监听行单击事件 table.on('row(test)', function(obj) { //选中行前radio Table.isCheckRadio(obj, form, table, 'tableReload'); //这是我的操作。。...
  • Layui实现checkbox复选单选及取消单选,即只能选一个或者全都不选, layui 数据表格复选实现单选功能
  • layui.table.on('row(test)', function (obj) { //选中行样式 obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click'); //选中radio样式 obj.tr.find('i[class="layui-anim layui-...
  • 项目中用到,在网上查了查,记录下来方便以后...Layui Table点击行时选中单选框 //注:test是table原始容器的属性 lay-filter=“对应的值” layui.table.on(‘row(i_Layer_SearchResult_Table_Filter)’, function...
  • (必填) 放置xtree的容器,样式参照 .xtree_contianer , form: form // (必填) layui 的 from , data: res.data // (必填) json数据 , click: function (data) { // 节点选中状态改变事件监听,全选框有...
  • 修改radio单选按钮的动态选中 前端页面代码 &lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt;订单状态&lt;/label&gt; &lt;...
  • 单选框设置了checked选中属性后,样式没有显示(使用layui组件时遇到的问题) <div class="col-sm-8 layui-form" style="display: inline-block"> <input type="radio" name="sex" lay-filter="shops_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 503
精华内容 201
关键字:

layui单选框样式