直接上代码,下面前端页面代码,使用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之单选和复选框不显示的更多相关文章

  1. Python3+Selenium3+webdriver学习笔记8(单选、复选框、弹窗处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  2. php一些单选、复选框的默认选择方法(示例)

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  3. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  4. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. selenium+Python(定位 单选、复选框,多层定位)

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

  6. android 中单选和复选框监听操作

    单选按钮RadioGroup.复选框CheckBox都有OnCheckedChangeListener事件,我们一起了解一下. package com.genwoxue.oncheckedchange ...

  7. js单选和复选框

    http://blog.csdn.net/chelen_jak/article/details/44827393 http://www.gbtags.com/technology/jquerynews ...

  8. 单选,复选操作div,显示隐藏

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. label 标签的用法,点label选中单选、复选框或文本框

    <label>拥有的权限</label> <label class="checkbox" id="privilege_id" st ...

随机推荐

  1. python学习之路------你想要的都在这里了

    python学习之路------你想要的都在这里了 (根据自己的学习进度后期不断更新哟!!!) 一.python基础 1.python基础--python基本知识.七大数据类型等 2.python基础 ...

  2. C#中使用ajax请求

    ajax简介 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式.快速动态网页应用的网页开发技术,无需重新加载 ...

  3. 解释Crypto模块,No module named "Crypto"

    1.pip install pycryptodome 2.Python\Python38\Lib\site-packages,找到这个路径,下面有一个文件夹叫做crypto,将小写c改成大写C就ok了 ...

  4. URI(统一资源标识符)

    URI:统一资源标识符 (Uniform Resource Identifier) 统一资源标识符是一个用于标识某一互联网资源名称的字符串. Web上可用的每种资源 -HTML文档.图像.视频片段.程 ...

  5. 算法数据结构 | 只要30行代码,实现快速匹配字符串的KMP算法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是算法数据结构专题的第29篇文章,我们来聊一个新的字符串匹配算法--KMP. KMP这个名字不是视频播放器,更不是看毛片,它其实是由Kn ...

  6. let、const、var的区别

    1.使用var声明的变量,其作用域为全局或者该语句所在的函数内,且存在变量提升现象. 下面使用node.js演示,也可以插入到html文件中使用以下代码 var a = 10; function te ...

  7. PHP frenchtojd() 函数

    ------------恢复内容开始------------ 实例 把法国共和历法的日期转换为儒略日计数,然后再转换回法国共和历法的日期: <?php$jd=frenchtojd(3,3,14) ...

  8. PHP strpbrk() 函数

    实例 在字符串中搜索字符 "oe",并返回字符串中从指定字符第一次出现的位置开始的剩余部分: <?php高佣联盟 www.cgewang.comecho strpbrk(&q ...

  9. Skill Virtuoso IC6.1.7 的所有View Type

    https://www.cnblogs.com/yeungchie/ 可以用deGetAllViewTypes()来获取. "graphic" "layout" ...

  10. java交换两个参数值的四种方法

    第一种:添加中间变量,算是最经典最简易的一种了. //添加一个中间变量 int x = 1, y = 2; int z; z = x;x = y;y = z; System.out.println(x ...