layui 动态设置checbox 选中状态的例子


Posted in Javascript onSeptember 02, 2019

最近在使用layui前端框架,在使用单选按钮、下拉菜单select、checkbox等控件的时候 往往遇到一些初始化的东西。

有时候会发现,自己动态append进去的代码要不就是没有显示,要不就是初始化默认选中出问题。

以上这些情况进行了测试:

第一种情况:动态append()html代码后没有显示空间的解决方案:

添加

layui.form.render();//重新渲染 可以解决多种没有显示的情况

第二种情况:动态设置默认选中状态没有效果解决方案:

细分为两种情况:

(1)在html页面代码下(没有在layer初始化框架中,即没有在layui.use([], function(){ }) 中进行初始化)

以初始化checkbox默认选中为例:

$('.xxx').attr("checked", true); //注意这里使用的是attr()
layui.form.render(); //重新渲染显示效果

(2)在layui.use(); 初始化中初始化一般这种情况会出现在调用api接口错误之后使用不然checkbox改变状态

layui.use(['form','layer'],function(){
 var form = layui.form
  layer = parent.layer === undefined ? layui.layer : top.layer,
  $ = layui.jquery;
 
if ($('.xxxx').attr("checked") === "checked") { //判断是否选中
 
    $('.xxxx').prop("checked", true); //设置选中 注意这里使用的是prop(), 这里要是使用了attr()是无效的
   } else {
 
    $('.xxxx').prop("checked", false);
   }
 
   form.render(); //重新渲染
});

以上这篇layui 动态设置checbox 选中状态的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 #Javascript
微信小程序 简易计算器实现代码实例
Sep 02 #Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 #Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 #Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 #Javascript
layui数据表格跨行自动合并的例子
Sep 02 #Javascript
Vue form表单动态添加组件实战案例
Sep 02 #Javascript
You might like
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
微信小程序仿美团城市选择
2018/06/06 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
django用户登录和注销的实现方法
2018/07/16 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python实现微信小程序支付功能
2019/07/25 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
统计员岗位职责
2013/11/14 职场文书
水果超市创业计划书
2014/01/27 职场文书
倡议书格式
2014/08/30 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
python flask框架快速入门
2021/05/14 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android