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

  经常用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. BZOJ4970 IOI2004 empodia障碍段

    4970: [ioi2004]empodia 障碍段 Time Limit: 10 Sec  Memory Limit: 128 MB Description 古数学及哲学家毕氏相信自然之本质为数学. ...

  2. iOS XIB等比例适配

    选择两个视图使其等宽高,再去约束里面就可以设置乘数因子. 简单的一个例子: 要求:设置白色视图的宽度为蓝色视图的一半 1.点击白色视图连线到父视图,选择 Equal Widths     2.选择右边 ...

  3. LODOP打印控件示例

    一.lodop打印预览效果图 LODOP.PRINT_SETUP();打印维护效果图 LODOP.PREVIEW();打印预览图 二.写在前面 最近项目用到了LODOP的套打,主要用到两个地方,一是物 ...

  4. 深入理解用户权限rwx

    其实在UNIX的实现中,文件权限用12个二进制位表示,如果该位置上的值是1,表示有相应的权限,如果是0则没有相应权限第11位为SUID位,第10位为SGID位,第9位为sticky位,第8-0位对应于 ...

  5. Linux第七节随笔-中 /date / ln /

    4.date link 作用:显示或设定系统的日期与时间 参数: -d<字符串> 显示字符串所指的日期与时间.字符串前后必须加上双引号. -s<字符串> 根据字符串来设置日期与 ...

  6. Oracle 用户操作表权限

    grant select any table to xxx 将使得xxx用户能够查看到所有用户的表:正确的授权不能是这样: 用户是隔离表的schema,授权时..

  7. 原来你是这样的JAVA[02]-包、传参、构造器

    一.包(package) 在java程序中,一个java源文件称为编译单元,以.java后缀命名.编译单元内可以有一个public类,类名必须与文件名相同.注意:每个编译单元只能有一个public类. ...

  8. collections --Counter

    collections 模块--Counter 目的是用来跟踪值出现的次数.是一个无序的容器类型,以字典的键值对形式存储,其中元素为 key,其计数作为 value.计数值可以是任意的 Integer ...

  9. python的time模块常用内置函数

    1.Python time time()方法 Python time time() 返回当前时间的时间戳(1970纪元后经过的浮点秒数). time()方法语法: time.time() 举例: #! ...

  10. 如何用Python在豆瓣中获取自己喜欢的TOP N电影信息

    一.什么是 Python Python (蟒蛇)是一门简单易学. 优雅健壮. 功能强大. 面向对象的解释型脚本语言.具有 20+ 年发展历史, 成熟稳定. 具有丰富和强大的类库支持日常应用. 1989 ...