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

作者 : admin 本文共1799个字,预计阅读时间需要5分钟 发布时间: 2020-12-24 共41人阅读
106源码网提供了免登录直接购买同时也可以注册本站开通会员,可以根据自己的需求去选择!注:本站不提供任何技术上的支持和服务!备用QQ:2330043781

这几天接触了一个二次开发,后台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后端定义的标签。

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

本站资源特别声明

① 106源码网所有源码来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长!
② 所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注。
③ 所有源码仅供大家学习和交流,您必须在下载后24小时内删除!
④ 如发现会员转载本站资源文章,本站有权封禁会员账号!
⑤ 不得使用于非法商业用途,不得违反国家法律。否则后果自负与本站无关!


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

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载无数据或打开不了?
有可能是因为百度网盘受到风控有敏感内容被删除了 ,如遇到此类问题请及时联系站长!
为什么开通了永久VIP部分商业资源还要另外购买?
为了好的程序和源码不泛滥部分商业资源另外需要购买的,好的东西我们也是大几部价钱买来的。

发表评论

  网站地图