直接上代码,下面前端页面代码,使用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. 关于简单的数据双向绑定原理,defineProperty 和Proxy演示

    双向绑定,也就是说js中的数据传到页面,页面中的内容到js,实现同步更新,简单的演示可以直接复制下放HTML代码运行. 在这个例子中,我们使用defineProperty ,Object.define ...

  2. Centos 7下编译安装PHP7.2(与Nginx搭配的安装方式)

    一.下载源码包 百度云网盘下载地址:https://pan.baidu.com/s/1li4oD3qjvFyIaEZQt2NVRg 提取码:4yde 二.安装php依赖组件 yum -y instal ...

  3. springboot 基于JS-SDK实现微信分享(一)

    本文主要介绍了SpringBoot 基于JS-SDK实现自定义微信分享,并通过本地测试的方式进行调试,文中通过微信实现分享流程及示例代码进行非常详细的介绍,希望本文对开发爱好者学习或者工作具有一定的参 ...

  4. 02_Linux实操篇

    第五章 VI和VIM编辑器 5.1. VI和VIM基本介绍 Vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器.由于对Unix及Linux系统的任何版本,Vi ...

  5. ES6标准入门 2/26

    第一章 ECMAScript6 简介 1.首先经典开头,ECMAScript跟JavaScript的关系,前者是后者的规格,后者是前者的一种实现.在日常场合中,这两个词是可以互换的. 2.ES6可以泛 ...

  6. 在Windows上安装MySQL(转整)

    MySQL安装 在Windows上安装MySQL.首先登录MySQL的官网下载安装包. 选择MySQL installer 这里选择第二个安装包下载即可. 下载完成之后就选择安装那个下载到的文件,基本 ...

  7. PHP preg_replace_callback_array() 函数

    preg_replace_callback_array 函数执行一个正则表达式搜索并且使用一个回调进行替换.高佣联盟 www.cgewang.com 该函数在 PHP7+ 版本支持. 语法 mixed ...

  8. PHP mysqli_stat() 函数

    创建 SSL 连接: <?php 高佣联盟 www.cgewang.com // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect(& ...

  9. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

  10. recv & recvfrom

    #include <sys/types.h> #include <sys/socket.h> ssize_t recv(int sockfd, void *buf, size_ ...