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入门之基本函数详解
Oct 21 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
vue-ajax小封装实例
Sep 18 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
解决layer 动态加载select 失效的问题
Sep 18 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
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
简单上手Python中装饰器的使用
2015/07/12 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
艺术用品:Arteza
2018/11/25 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
Java详细解析==和equals的区别
2022/04/07 Java/Android