直接上代码,下面前端页面代码,使用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. DataNavigatorButtons

    备注 您可以访问使用该控件的DataNavigator.Buttons属性显示在一个的DataNavigator控制按钮设置.该属性的返回值是一个DataNavigatorButtons对象. 下图说 ...

  2. Mac OS 上设置 JAVA_HOME

    Mac OS 上设置 JAVA_HOME 原文链接:http://han.guokai.blog.163.com/blog/static/136718271201301183938165/ 由于需要, ...

  3. ERROR 1005 (HY000): Can&#39;t create table&#39;matrix.system_log&#39; (errno: 150)

    CREATE TABLE `user` (`id` bigint(32) NOT NULL AUTO_INCREMENT ,`name` varchar(32) CHARACTER SET utf8 ...

  4. javaweb学习路之一--web项目搭建

    概述: 工作闲暇时间想要自己搭建一个web项目玩玩,没想到大半天才弄了一个springMVC+mybatis的网站,简直菜的不行,以下记录所有的步骤加深印象 使用环境 1.jdk1.8 2.maven ...

  5. 制作自己的web字体

    今天教给大家制作自己的web字体

  6. SERVICE_USE_PID

    openwrt中启动脚本中经常出现如下一句: SERVICE_USE_PID=1 例如 lldp启动脚本 lldpd.init中如下: #!/bin/sh /etc/rc.common # Copyr ...

  7. shell 之解释器、变量、字符串、数组

    1.Shell简介 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言.Shell 是指一种应用程序,这个应用程序提供了一个 ...

  8. Dynamics 365 Customer Engagement安装FAQ

    微软动态CRM专家罗勇 ,回复310或者20190308可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 本文参考了包括但不限 ...

  9. 2018-2019-2 20165308网络对抗技术 Exp6:信息收集与漏洞扫描

    2018-2019-2 20165308网络对抗技术 Exp6:信息收集与漏洞扫描 实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册 ...

  10. 【IDEA&amp;&amp;Eclipse】5、IntelliJ IDEA常见配置

    [idea配置jdk] http://blog.csdn.net/tolcf/article/details/50803414 [idea intellij 如何配置tomcat]http://jin ...