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

  经常用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. xamarin android menu的用法

    在Android中的菜单有如下几种: OptionMenu:选项菜单,android中最常见的菜单,通过Menu键来调用 SubMenu:子菜单,android中点击子菜单将弹出一个显示子菜单项的悬浮 ...

  2. TxDragon的训练5

    Solution 代码:由乃: //MADE BY QT666 #include<iostream> #include<cstdio> #include<algorith ...

  3. 第四节 mount /who / mkdir /rmdir /rm /cp /mv /touch /cat /tac/head /tail /more /less / chmod /chown /umask /chattr /lsattr /history /echo

    ***Linux下的文件类型如下: 9 8 7 6 5 4 3 2 1 0- r w x r - x r - x 第9位表示文件类型,可以为p.d.l.s.c.b和-:p表示命名管道文件 -pipe ...

  4. 为什么要学ADO.NET。。。什么是ADO.NET。。。

    之前学的 •只能在查询分析器里查看数据,操作数据,我们不能让普通用户去学sql,所以我们搭建一个界面(Web Winform)让用户方便的操作数据库中的数据.   •ADO.NET就是一组类库,这组类 ...

  5. 编译Twitter的Heron时一直报错“heron/bazel_configure.py", line 25, in <module> import semver ImportError: No module named semver”如何处理。

    今天编译heron的时候,从官方git到的源码bazel_configure的时候一直报错如下: Traceback (most recent call last): File , in <mo ...

  6. [编织消息框架][netty源码分析]13 ByteBuf 实现类CompositeByteBuf职责与实现

    public class CompositeByteBuf extends AbstractReferenceCountedByteBuf implements Iterable<ByteBuf ...

  7. idea激活网站地址,亲测可用(windows7,idea 2016)

    help-register-license server,然后输入 http://idea.iteblog.com/key.php

  8. android inline hook

    最近终于沉下心来对着书把hook跟注入方面的代码敲了一遍,打算写几个博客把它们记录下来. 第一次介绍一下我感觉难度最大的inline hook,实现代码参考了腾讯GAD的游戏安全入门. inline ...

  9. 3、ABPZero系列教程之拼多多卖家工具 项目修改及优化

    本篇内容杂而简单,不需要多租户.不需要多语言.使用MPA(多页面).页面加载速度提升…… 刚登录系统会看到如下界面,这不是最终想要的效果,以下就一一来修改. 不需要多租户 AbpZeroTemplat ...

  10. selenium获取动态网页信息(某东)-具体配置信息

    需要安装的包: selenium 关于软件的驱动:selenium之 驱动环境配置chrome.firefox.IE 1 # encoding:utf-8 2 # Author:"richi ...