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获取class的所有元素
Mar 28 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python单链表简单实现代码
2016/04/27 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python itertools.product方法代码实例
2020/03/27 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
python实现马丁策略的实例详解
2021/01/15 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
2014年秋季新学期寄语
2014/08/02 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python