【踩坑笔记】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 ...
随机推荐
- python学习之路------你想要的都在这里了
python学习之路------你想要的都在这里了 (根据自己的学习进度后期不断更新哟!!!) 一.python基础 1.python基础--python基本知识.七大数据类型等 2.python基础 ...
- C#中使用ajax请求
ajax简介 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式.快速动态网页应用的网页开发技术,无需重新加载 ...
- 解释Crypto模块,No module named "Crypto"
1.pip install pycryptodome 2.Python\Python38\Lib\site-packages,找到这个路径,下面有一个文件夹叫做crypto,将小写c改成大写C就ok了 ...
- URI(统一资源标识符)
URI:统一资源标识符 (Uniform Resource Identifier) 统一资源标识符是一个用于标识某一互联网资源名称的字符串. Web上可用的每种资源 -HTML文档.图像.视频片段.程 ...
- 算法数据结构 | 只要30行代码,实现快速匹配字符串的KMP算法
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是算法数据结构专题的第29篇文章,我们来聊一个新的字符串匹配算法--KMP. KMP这个名字不是视频播放器,更不是看毛片,它其实是由Kn ...
- let、const、var的区别
1.使用var声明的变量,其作用域为全局或者该语句所在的函数内,且存在变量提升现象. 下面使用node.js演示,也可以插入到html文件中使用以下代码 var a = 10; function te ...
- PHP frenchtojd() 函数
------------恢复内容开始------------ 实例 把法国共和历法的日期转换为儒略日计数,然后再转换回法国共和历法的日期: <?php$jd=frenchtojd(3,3,14) ...
- PHP strpbrk() 函数
实例 在字符串中搜索字符 "oe",并返回字符串中从指定字符第一次出现的位置开始的剩余部分: <?php高佣联盟 www.cgewang.comecho strpbrk(&q ...
- Skill Virtuoso IC6.1.7 的所有View Type
https://www.cnblogs.com/yeungchie/ 可以用deGetAllViewTypes()来获取. "graphic" "layout" ...
- java交换两个参数值的四种方法
第一种:添加中间变量,算是最经典最简易的一种了. //添加一个中间变量 int x = 1, y = 2; int z; z = x;x = y;y = z; System.out.println(x ...