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 相关文章推荐
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
vue脚手架中配置Sass的方法
Jan 04 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
19个Android常用工具类汇总
2014/12/30 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
vue分页器组件编写方法详解
2019/06/28 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
three.js 如何制作魔方
2020/07/31 Javascript
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python中list初始化方法示例
2016/09/18 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
元旦晚会策划方案
2014/02/18 职场文书
化学专业自荐信
2014/05/28 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
Python可视化学习之seaborn调色盘
2022/02/24 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL