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

最新文章

  1. asp.net MVC 通用登录验证模块
  2. mybatis学习
  3. Fresco简单的使用—SimpleDraweeView
  4. 微软极品工具箱-Sysinternals Suite
  5. &lt;转&gt;iOS9 Day-by-Day:iOS开发者必须了解的iOS 9新技术与API
  6. web安全测试-AppScan
  7. Geetest 极验验证 验证图片拼图
  8. SmartZoneOCR识别控件免费下载地址
  9. JBOSS集群技术升级版解决方案分享(图示篇)
  10. Sqlserver 列转行 行转列
  11. html网页代码各种名称及作用
  12. [tarjan] poj 1236 Network of Schools
  13. Variant does not reference an auomation object
  14. angular2-7中的变化监测
  15. 我们是如何通过全球第一免费开源ERP Odoo做到项目100%交付
  16. 怼天怼地怼空气的Linus喜欢怎样的工作方式?
  17. python 文件重命名
  18. (转载)深度学习的weight initialization
  19. 关于ava容器、队列,知识点总结
  20. JQuery-学习。

热门文章

  1. C#中Session的用法详细介绍
  2. 02_HTML02
  3. Python os.openpty() 方法
  4. Spring 方法替换 了解一下
  5. 极简 Node.js 入门 - 1.2 模块系统
  6. “随手记”开发记录day11
  7. Hotspot GC研发工程师也许漏掉了一块逻辑
  8. AI测温落地趋势:已成日常刚需 产品形态呈细分化发展
  9. spring boot项目集成zuul网关
  10. 新司机的致胜法宝,使用ApexSql Log2018快速恢复数据库被删除的数据