JS实现单选按钮回显时页面效果出现,但选中单选框的值为空
最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下:
经常用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实现单选按钮回显时页面效果出现,但选中单选框的值为空的更多相关文章
- js获取单选框的值
js获取单选框的值 var lx= $("input[name='lx']:checked").val();
- SpringMVC+HibernateValidator,配置在properties文件中的错误信息回显前端页面出现中文乱码
问题: 后台在springMVC中使用hibernate-validator做参数校验的时候(validator具体使用方法见GOOGLE),用properties文件配置了校验失败的错误信息.发现回 ...
- vue-quill-editor回显时移除焦点
直接复制开用 解决在回显数据的时候会默认聚焦 this.$refs.myQuillEditor.quill.enable(false); setTimeout(() => { this.$ref ...
- EasyUI-combotree 下拉树 数据回显时默认选中
组合树(combotree)把选择控件和下拉树结合起来.它与组合框(combobox)相似,不同的是把列表替换成树组件.组合树(combotree)支持带有用于多选的树状态复选框的树. 依赖 comb ...
- js实现上传图片回显功能
用到h5技术 <img id="headimg" src="<%=path%>/resources/images/icon4.png" sty ...
- js 上传图片进行回显
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js select 默认回显判断
<select id="dataselect" class="input-medium" style="width: 20%"> ...
- checkbox后台传个list显示和回显的页面代码C标签
<c:forEach items="${listtest}" var="provinces"> <input type= ...
- 最完美解决方案:js弹出窗口关闭当前页面,而不弹出提示框
该功能主要用于业务系统中的登录操作,登录后弹出全屏的业务系统主界面,而不需要工具栏.地址栏.菜单等功能. 之前针对不同浏览器找了无数种方法,包括网上能查到的所有方法,弹出的结果都不理想.结果有的IE6 ...
随机推荐
- (一)DOM 常用操作 —— “查找”节点
在 DOM 树中,如果想要操作一个节点,那么首先要"查找"到这个节点.查找节点的方法由 Document 接口定义,而该接口由 JavaScript 中的 document 对象实 ...
- 在Windows上运行Linux
在Windows上运行Linux 之前了解过一些适用于linux的Windows子系统,最近又听人提起,于是在自己的Windows 10专业版上安装了一个Ubuntu.运行起来还真方便,以后在wind ...
- 几种加密算法的java实现包括MD5、RSA、SHA256
SHA加密: package com; import java.security.MessageDigest;import java.security.NoSuchAlgorithmException ...
- mybatis的知识点
mybatis核心配置文件的配置 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE conf ...
- MySQL:表的操作 知识点难点总结:表完整性约束及其他常用知识点二次总结🙄
表操作 一 : 修改表表表表表表表表表: ALTER TABLE 语法 1. 改表名rename alter table 表名 rename 新表名 2. 增加字段add alter table 表名 ...
- 使用nginx 的反向代理 给 kibana加上basic的身份认证
第一步准备工作 准备用户名密码: 更改host文件 第二步,安装nginx ubuntu安装Nginx之后的文件结构大致为:所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/et ...
- Angular5系列教程:ng-book2-angular-5-r66 土家翻译,话糙理不糙
嗯, 在工作还辣么忙之时,看了这本书,感觉很不错.想分享给国内朋友们.结合自己的理解和整理加翻译,可能有点糙,但是,话糙理不糙嘛.出系列,不知道会不会弃坑,不立Flag了.持续更新.....我会放在印 ...
- MicroPython教程之TPYBoard v102 CAN总线通信
0x00前言 CAN是控制器局域网络(ControllerAreaNetwork,CAN)的简称,是ISO国际标准化的串行通信协议.CAN总线结构简单,只需2根线与外部相连,并且内部集成了错误探测和管 ...
- Android 根据字符串动态获取资源ID
1.常用方法public int getResId(String name,Context context){ Resources r = context.getResources(); int id ...
- 小程序wxss和css3的区别
经过设置发现,微信小程序中wxss并不能完全支持css3的全部功能. 总结记录在此文中,以免忘记. 0 . wxss不能直接通过css3中的background-image属性来设置显示的背景图片. ...