解决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默认选项的解决方案相关推荐
- 3种前端动态设置纯色图标的颜色的方法
在开发中,我们需要实现动态切换全局主题色,对于文字颜色或者背景都很好实现,但是页面中经常会有很多小图标,也需要根据主题色进行切换. 这篇文章主要介绍3种最常用的实现方法. 1.使用svg图,通过更改p ...
- html如何设置radio单选按钮默认选中效果
从标题看这个问题够简单,事实也是如此,不过在群里还是看到有初学者来询问这个问题,下面就展示一段代码实例,如果实现多个单选按钮实现其中的一个默认选中效果. 代码实例如下: 01 02 03 04 05 ...
- html改变复选框颜色,如何利用纯CSS改变html?radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
- 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起
前言 因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
- ajax的全局方法,jQuery之使用ajaxSetup()方法设置全局Ajax默认选项
使用 `ajaxSetup()` 方法可以设置 Ajax 请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: ```javascript jQuery.a ...
- ajax选项教程,使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxSetup()方法设置全局ajax请求默认选项 奇偶性和是否大于0 请求输入一个数字 $(function () { ? ? ? $("ul").append(&quo ...
- 26.使用ajaxSetup()方法设置全局Ajax默认选项
使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: jQuery.ajaxSetup([options])或 ...
- layui 动态设置radio选中
html <div class="layui-card-header fk-mail-group" index="0"><input type ...
- html radio 默认图片替换_用纯CSS改变html radio/checkbox默认背景颜色样式
checkbox/ radoi默认不支持更改背景颜色,这里可以使用伪类来实现.基本原理是利用after/ before插入新的元素.然后利用新元素的背景颜色或背景图片覆盖掉原来的样式. CSS代码: ...
最新文章
- Java Web中的jsp技术
- 一起学微软Power BI系列-使用技巧(1)连接Oracle与Mysql数据库
- javafx官方文档学习之二Scene体系学习一
- 日常make 的小技巧
- Android 之小技巧
- Sklearn(v3)——朴素贝叶斯(1)
- 【USACO06DEC】—牛奶模式Milk Patterns(后缀自动机)
- 记录element-ui级联选择器,二级三级列表无法显示的解决办法
- http 测试工具_20+最好的开源自动化测试工具
- Windows 查看端口占用
- ci mysql高并发_高并发访问mysql时的问题(一):库存超减
- 抖音直播营销实战经验手册
- 【咸鱼教程】置于后台停止计时,修改引擎源码解决。
- 使用WebDeployment Project改善VS2005发布网站问题 [系列导读]
- P5112 FZOUTSY
- 完了!Oracle 被虐!MySQL 登顶 Top1!原来这么多人都在用
- 阿里重磅开源中后台UI解决方案Fusion
- ubuntu/Windows双系统,在ubuntu隐藏window分区的方法
- CSS之内联、内部、外部样式
- 怎么提取pdf文件中的图片