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变成相应的事件即可。

原文地址:https://www.cnblogs.com/xiaobingtuji/p/8337307.html

时间: 2024-11-06 15:35:12

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

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

问题: 后台在springMVC中使用hibernate-validator做参数校验的时候(validator具体使用方法见GOOGLE),用properties文件配置了校验失败的错误信息.发现回显给前端页面的时候中文错误信息显示乱码. 封装参数的POJO类 public class UserReqBean { @NotNull(message="{user.name.notnull}") private String userName; } ValErrMsg.propertie

js实现上传图片回显功能

用到h5技术 <img id="headimg" src="<%=path%>/resources/images/icon4.png" style="cursor:pointer;" height="90px;" width="95%;">                    <input id="headurladd" type="file&q

Antdesign Select控件回显时显示value值 不显示Label

<Select style={{ width: 120 }} value={this.state.aa} onChange={this.handleChangeVCharge}> <Option value="0">aa</Option> <Option value="1">bb</Option> <Option value="2">cc</Option> <

关于JS将图片回显问题,将byte[]转化为流,信息填入input框内

1 <script> 2 3 var For_photo = [] 4 var normal_data = new Object(); 5 var Userinfo = JSON.parse(sessionStorage.getItem('Userinformation')); 6 for (var prop in Userinfo) { 7 //$("[name='" + prop + "']").val(ForeignTeachers[prop]);

自学篇之--js 提取复选框和单选框的值 和纯css的3D按钮

<html> <head> <meta charset="utf-8" content="text/htnl"> <title>button</title> <style type="text/css"> a.button{ position:relative; width: 80px; height: 50px; background-color: red; display

select,radio 表单回显避免使用jquery载入赋值

select,radio 表单回显避免使用jquery载入赋值 注意事项: 复制代码代码如下: <html> <body> <form method="post" action=""> <!-- 如果表单中使用重置功能时,不推荐使用如下代码 --> <input type="radio" name="visible" value="1" />显示&

原生js验证简洁美观注册登录页面

序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css

react 原生 数据回显问题 及 单选默认

const {form} = this.state; console.log(form)  //数据可以获取到 //直接 form.name 会出现错误但不影响数据的显示 <input type="text" value={form.name} onChange={this.handleChange} className="name" />//后来各种试 用三目运算 form.name ? form.name : "" 不会报错了 &

基于错误回显的sql注入整理

由于复习,停了好几天,今天换换模式做了一下关于错误回显的ctf题目,首先附上题目:here 整理了一下网上的一些关于错误回显的方法,在这里就不带上地址了,请大牛们原谅:P 0x00 关于错误回显 用我自己的话来讲,基于错误回显的sql注入就是通过sql语句的矛盾性来使数据被回显到页面上(当然在实际应用中得能回显在页面上,一般的网站都回避免这种情况,哈哈,要是能碰上你就偷着乐吧). 0x01  用于错误回显的sql语句(下面的函数撸主只在mysql下试过也能成功,其他数据库有待考证,待有实例的时候