脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layui 动态设置checbox 选中状态

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

 更新时间：2019年09月02日 14:44:38   作者：blowDestiny  
今天小编就为大家分享一篇layui 动态设置checbox 选中状态的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

最近在使用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 选中状态的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

    JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

    这篇文章主要介绍了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能,结合实例形式分析了javascript事件响应及页面元素属性动态操作弹出与关闭遮罩层相关实现技巧,需要的朋友可以参考下
    2018-07-07
  • 微信小程序开发实战快速入门教程

    微信小程序开发实战快速入门教程

    这篇文章主要为大家介绍了开发一个微信小程序实战快速入门教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-04-04
  • JavaScript取得鼠标绝对位置程序代码介绍

    JavaScript取得鼠标绝对位置程序代码介绍

    文章介绍了关于JavaScript在不同浏览器下取得鼠标绝对位置相关函数用法及兼容性介绍，有需要的同学可参考一下
    2012-09-09
  • 深入分析javascript中console命令

    深入分析javascript中console命令

    console对象是JavaScript的原生对象，它有点像Unix系统的标准输出stdout和标准错误stderr，可以输出各种信息用来调试程序，而且还提供了很多额外的方法，供开发者调用。它的常见用途有两个。显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。
    2016-08-08
  • DeviceOne 让你一见钟情的App快速开发平台

    DeviceOne 让你一见钟情的App快速开发平台

    DeviceOne是一个非常先进的App开发平台，使用Javascript 构建原生体验的移动应用程序，DeviceOne主要关注外观和体验，以及和你的应用程序的 UI 交互
    2016-02-02
  • Bootstrap CSS布局之表格

    Bootstrap CSS布局之表格

    这篇文章主要为大家详细介绍了Bootstrap CSS布局之表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js调试系列 源码定位与调试[基础篇]

    js调试系列 源码定位与调试[基础篇]

    如果看了1, 2两篇，你对控制台应该有一个初步了解了，今天我们来个简单的调试。昨天留的三个课后练习，差不多就是今天要讲的内容
    2014-06-06
  • 微信小程序进入广告实现代码实例

    微信小程序进入广告实现代码实例

    这篇文章主要介绍了微信小程序进入广告实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript获得页面base标签中url的方法

    JavaScript获得页面base标签中url的方法

    这篇文章主要介绍了JavaScript获得页面base标签中url的方法,涉及javascript中元素的获取及href属性的使用技巧,需要的朋友可以参考下
    2015-04-04
  • JS实现可视化文件上传

    JS实现可视化文件上传

    这篇文章主要为大家详细 介绍了JS实现可视化文件上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-09-09

最新评论