最新公告
  • 欢迎您光临搜资源,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 解决layui前端动态设置radio、checkbox默认选项的解决方案

    前几天接触一个二次开发,后台UI用的是layui框架,程序原来的TAG标签设置中自由输入的,想修改为单选。这样子的功能用于,一个产品属于两种分类的作法。第一种就是系统自带的产品分类,第二种使用标签来实现。然尔一个产品并不需要同时属于两个以上的标签,所以二次开发修改为单选radio,而不是多选checkbox。

    不过本文作出的动态设置选中状态单选与多选的作法是一致的。

    在前端模板文件中,普通用到的是使用<if condition=””></if>来作判断。但是奇怪的就是layui并不能识别。

    第一次尝试:

    <input class='layui-input' type='radio' name='tag' title='正常' value='正常' <if condition="">checked</if>>

    发现在input包括中无法解析到if判断语句;当然在普通情况下是可以的,中不过程序使用了layui,因为layui通过js识别所有表单元素,重新编译了。所以在js的重新编译中无法识别原本不属于表无素材的标签。

    第二次尝试:

    <if condition="">
    
    <input class='layui-input' type='radio' name='tag' title='正常' value='正常' checked>
    
    <else/>
    
    <input class='layui-input' type='radio' name='tag' title='正常' value='正常'>
    
    </if>
    

    以上代码确定可以选中状态,但随之又有其它问题随之而来,选中的与未选中的两个均会显示出来,为什么呢?

    原因还是在于layui遍历form里的表单元素,并不会因if语句的存在而作出最终结果。而是识别到有两个input。

    第三次尝试,不用radio,不就是单选吗?下拉单项也是可以的,使用<select>又测试了一番。同样会出现以上两个问题。

    无办法下只能求助于神奇的百度给出了这样的结果;

    $("input[name=tag][value=正常]").prop("checked","true");
    
    form.render();

    prop() 方法设置或返回被选元素的属性和值。

    当该方法用于返回属性值时,则返回第一个匹配元素的值。

    当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

    render()就是重新渲染对象;

    看到这里很多朋友以为问题已经得到解决了,其实问题才刚刚开始。不是提示form对象找不到,就是提示form中找不到render()方法。为什么呢,整套程序不是doem,它还整合了很多其它的框架和插件,调作起来并不像官方给出的这么直接。

    form.render();
    
    $form.render();
    
    form().render();
    
    .layui.form().render();
    
    ……

    通通试了一篇,还是不行,这东西就有这么折腾。累了中途休息一下。

    一觉睡醒,阔然开朗。先来看看完成后的代码。

    thistag="{$info.tag}";//读后台数据值
    
    var mytag=new Array("无","第一项","第二项","第三项","第四项","第五项");//所有单选项目
    
    cntag="";
    
    for(j = 0,len=mytag.length; j < len; j++) { //遍历数组
    
    if(thistag==mytag[j]){ //判断是否选中
    
    cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' checked>";
    
    }else{
    
    cntag+="<input class=\'layui-input\' type=\'radio\' name=\'tag\' id=\'tag\' title=\'"+newtit+"\' value=\'"+mytag[j]+"\' >";
    
    }
    
    }
    
    $("#cntag").html(cntag); //打印到网页中显示最终效果

    优点:只读一次后面数据;

    简化:就算单选项很多,只需写在一个数组中即可。

    简单:只需写一次判断语句;

    原理既然是前端使用,多用js,少用<if><php>这些php后端定义的标签。

    我不太会使用格式嵌套代码来写,不然代码会显示得好看一些。

    免责声明:
    本内容由用户共同创建和维护,不代表本站立场。
    如侵犯到您的合法权益,请您联系本站删除资源!
    如您遇到资源链接失效,请您前往工单方式通知!
    未经搜资源网许可,不得转载。

    搜资源 » 解决layui前端动态设置radio、checkbox默认选项的解决方案

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或工单联络我们.。
    下载链接失效
    如碰到链接失效,请您到个人中心以工单的形式像客服反馈,我们将尽快24小时之内处理解决。
    架设失败怎么处理?
    1.请使用和安装说明里要求一致的架设环境;2.认真阅读网站文字说明和压缩包内的安装说明,逐步进行安装,特别注意有些需要运行目录和伪静态;3.如果在本地环境中架设失败请使用服务器环境,不要问我为什么,很多程序在本地环境架设不起在服务器liunx环境下直接起飞

    发表评论

    • 53会员总数(位)
    • 1163资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 340稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级