【踩坑笔记】layui之单选和复选框不显示
直接上代码,下面前端页面代码,使用layui框架:
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" id="sex-boy" name="sex" value="男" title="男" checked>
<input type="radio" id="sex-girl" name="sex" value="女" title="女">
</div>
</div>
</div>
再来看js和css的引入,注意我这里引入的js是layui.all.js(问题就在这):
<link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${path}/static/css/admin.css" media="all">
<script type="text/javascript" src="${path}/static/layui/layui.all.js"></script>
然后运行看页面:
该死,他怎么又显示出来了?????
好吧,我先说,之前的却不显示的,就那个radio那块怎么都不显示,控制台也没报错,接下来经过以下一顿捣鼓,现在正如你看到的,他居然显示了。
修改上面引入的layui.all.js为layui.js:
<script type="text/javascript" src="${path}/static/layui/layui.js"></script>
在页面结尾加入以下js代码块:
<script type="text/javascript">
layui.use('form',function(){
const form = layui.form;
form.render();
});
</script>
这就刷新资源,更新页面就可以显示了,然后你可以再把js改回去试试,说不定也可以了,amazing!!!
下面是根据后台的sex值动态切换radio的checked,前端html代码不变:
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" id="sex-boy" name="sex" value="男" title="男" checked>
<input type="radio" id="sex-girl" name="sex" value="女" title="女">
</div>
</div>
</div>
<!-- js code -->
<script type="text/javascript">
layui.use('form',function () {
var form = layui.form,
$ = layui.$;
const sex = "${adm.sex}"; // 这里是从后台传回来的值
if (sex === "女"){
console.log("sex=女");
$("#sex-boy").prop("checked",false);
$("#sex-girl").prop("checked",true);
}
form.render();
});
</script>
【踩坑笔记】layui之单选和复选框不显示的更多相关文章
- Python3+Selenium3+webdriver学习笔记8(单选、复选框、弹窗处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
- php一些单选、复选框的默认选择方法(示例)
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- iCheck获取单选和复选框的值和文本
//获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...
- 纯css美化单选、复选框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- selenium+Python(定位 单选、复选框,多层定位)
1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...
- android 中单选和复选框监听操作
单选按钮RadioGroup.复选框CheckBox都有OnCheckedChangeListener事件,我们一起了解一下. package com.genwoxue.oncheckedchange ...
- js单选和复选框
http://blog.csdn.net/chelen_jak/article/details/44827393 http://www.gbtags.com/technology/jquerynews ...
- 单选,复选操作div,显示隐藏
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- label 标签的用法,点label选中单选、复选框或文本框
<label>拥有的权限</label> <label class="checkbox" id="privilege_id" st ...
随机推荐
- 关于简单的数据双向绑定原理,defineProperty 和Proxy演示
双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行. 在这个例子中,我们使用defineProperty ,Object.define ...
- Centos 7下编译安装PHP7.2(与Nginx搭配的安装方式)
一.下载源码包 百度云网盘下载地址:https://pan.baidu.com/s/1li4oD3qjvFyIaEZQt2NVRg 提取码:4yde 二.安装php依赖组件 yum -y instal ...
- springboot 基于JS-SDK实现微信分享(一)
本文主要介绍了SpringBoot 基于JS-SDK实现自定义微信分享,并通过本地测试的方式进行调试,文中通过微信实现分享流程及示例代码进行非常详细的介绍,希望本文对开发爱好者学习或者工作具有一定的参 ...
- 02_Linux实操篇
第五章 VI和VIM编辑器 5.1. VI和VIM基本介绍 Vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器.由于对Unix及Linux系统的任何版本,Vi ...
- ES6标准入门 2/26
第一章 ECMAScript6 简介 1.首先经典开头,ECMAScript跟JavaScript的关系,前者是后者的规格,后者是前者的一种实现.在日常场合中,这两个词是可以互换的. 2.ES6可以泛 ...
- 在Windows上安装MySQL(转整)
MySQL安装 在Windows上安装MySQL.首先登录MySQL的官网下载安装包. 选择MySQL installer 这里选择第二个安装包下载即可. 下载完成之后就选择安装那个下载到的文件,基本 ...
- PHP preg_replace_callback_array() 函数
preg_replace_callback_array 函数执行一个正则表达式搜索并且使用一个回调进行替换.高佣联盟 www.cgewang.com 该函数在 PHP7+ 版本支持. 语法 mixed ...
- PHP mysqli_stat() 函数
创建 SSL 连接: <?php 高佣联盟 www.cgewang.com // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect(& ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
- recv & recvfrom
#include <sys/types.h> #include <sys/socket.h> ssize_t recv(int sockfd, void *buf, size_ ...