最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下:

  经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取不能取的选中单选框的值(单选框取值有很多种方法,我的意思是有的能够取到,有的方法取不到)。

  想了很久,整理出一套看起来很复杂却非常实用的JS回显方法。试验了多种前端框架和浏览器,均好使。假设我们需要给name为gender,value为1的单选框进行回显:

  $("[name='gender'][value=1]").attr("checked", "checked").prop("checked", true).trigger("change");

  attr和prop可以保证任何获取选中单选框的值的方法都可以获得,trigger方法手动触发单选框的change事件。如果你的单选框的事件是其他事件,只需要将change变成相应的事件即可。

JS实现单选按钮回显时页面效果出现,但选中单选框的值为空的更多相关文章

  1. js获取单选框的值

    js获取单选框的值 var lx= $("input[name='lx']:checked").val();

  2. SpringMVC+HibernateValidator,配置在properties文件中的错误信息回显前端页面出现中文乱码

    问题: 后台在springMVC中使用hibernate-validator做参数校验的时候(validator具体使用方法见GOOGLE),用properties文件配置了校验失败的错误信息.发现回 ...

  3. vue-quill-editor回显时移除焦点

    直接复制开用 解决在回显数据的时候会默认聚焦 this.$refs.myQuillEditor.quill.enable(false); setTimeout(() => { this.$ref ...

  4. EasyUI-combotree 下拉树 数据回显时默认选中

    组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 依赖 comb ...

  5. js实现上传图片回显功能

    用到h5技术 <img id="headimg" src="<%=path%>/resources/images/icon4.png" sty ...

  6. js 上传图片进行回显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js select 默认回显判断

    <select id="dataselect" class="input-medium" style="width: 20%"> ...

  8. checkbox后台传个list显示和回显的页面代码C标签

        <c:forEach items="${listtest}" var="provinces">        <input type= ...

  9. 最完美解决方案:js弹出窗口关闭当前页面,而不弹出提示框

    该功能主要用于业务系统中的登录操作,登录后弹出全屏的业务系统主界面,而不需要工具栏.地址栏.菜单等功能. 之前针对不同浏览器找了无数种方法,包括网上能查到的所有方法,弹出的结果都不理想.结果有的IE6 ...

随机推荐

  1. ArcGIS API for JavaScript 与 Vue.js

    我一开始学Vue.js的时候还仅限于script标签里引用vue.js文件这种纯前端静态的做法,我也不知道vue.js究竟是怎么生成页面的. 我习惯性地把AJS的js文件也用script标签引用进来, ...

  2. Find the Maximum sum

    Given an array of n elements.Find the maximum sum when the array elements will be arranged in such w ...

  3. 大赛获奖选手专访 | 冷燕冰:最佳设计奖TIMING里的时机和时序

    Mockplus三周年原型设计大赛,从筹备到11月21日完美落幕,50余天的时光,已成为过去.这场近千人参赛的原型设计大赛,我想,无论是于主办方,于参赛选手,于专家评委,还是于每一个关注和参与的人,都 ...

  4. GAME——转圈游戏

    我们在生命的路上常常绝望 大概是因为弯路走了太多 脚上的泡被磨起又磨破 像我们所有的幻想与梦 起起落落. 所以说 我这道题考场上面和题解想得一模一样啊啊啊啊啊啊啊啊啊啊!!!!!! 但是就是打复杂了啊 ...

  5. linux下后台运行MATLAB

    原帖:http://sypeterli1.blog.163.com/blog/static/2283740492013101745824207/ 后台运行matlab脚本文件的方法:nohup     ...

  6. Q:javax.comm 2.0 windows下Eclipse的配置

    @转自http://blog.csdn.net/zhuanghe_xing/article/details/7523744处 要在Windows下,对计算机的串口或并口等进行编程,可以选择使用Java ...

  7. PHP 判断Header 送出前, 是否有值被送出去: headers_sent()

    1 为避免header()函数是,出现 <b>Warning</b>:  Cannot modify header information - headers already ...

  8. springboot 注册服务注册中心(zk)的两种方式

    在使用springboot进行开发的过程中,我们经常需要处理这样的场景:在服务启动的时候,需要向服务注册中心(例如zk)注册服务状态,以便当服务状态改变的时候,可以故障摘除和负载均衡. 我遇到过两种注 ...

  9. Python各类图像库的图片读写方式总结

    最近在研究深度学习视觉相关的东西,经常需要写python代码搭建深度学习模型.比如写CNN模型相关代码时,我们需要借助python图像库来读取图像并进行一系列的图像处理工作.我最常用的图像库当然是op ...

  10. hexo next主题为博客添加分享功能

    title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 ...