html单选按钮默认选择

前端 专栏收录该内容
16 篇文章 0 订阅

页面需要一个选择性别的单选按钮,要求默认是根据后台返回值来选择“男”或“女”,然后可以手动进行修改。注:下图中单选按钮的按钮是图片,根据是否被选中来显示不同的图片。
在这里插入图片描述

先写出性别里的两个单选按钮。

<div class="userBox">
	<div class="nameString">性别</div>
    <input type="radio" name="sex" class="radio" id="male" value=""/><label for="male" id="sexMale"></label>
    <input type="radio" name="sex" class="radio" id="female" value=""/><label for="female" id="sexFemale"></label>
</div>

然后进行判断,给定一个默认选中

if(this.usersex==="男")
	document.getElementById("male").checked = true;
else if(this.usersex==="女")
    document.getElementById("female").checked = true;

如果默认选择是“男”的话可以直接这样

document.getElementById("male").checked = true;

最后就是获取用户最后到底选了哪一个

let sexvalue=document.getElementsByName("sex")
let sex=""
for(let i=0;i<sexvalue.length;i++){
	if(sexvalue[i].checked==true){
		sex=sexvalue[i].value
	}
}

就是把sex都获取出来,然后检查一下checked的状态,就可以得到选择了什么性别。

最最后补下前面说的单选按钮是根据是否被选择来选取不同图片的问题

.radio:checked{
    position: absolute;
    font-size: 28px;
    color: #3A3D50;
    background-size: cover;
    background-image: url("../assets/selectedradio.png");
    appearance: none;
    -webkit-appearance: none;
    outline: none;

    width: 28px;
    height: 28px;
  }
.radio{
    position: absolute;
    font-size: 28px;

    background-size: cover;
    background-image: url("../assets/unselecedradio.png");

    appearance: none;
    -webkit-appearance: none;
    outline: none;

    width: 28px;
    height: 28px;
    background-color: #FFFFFF;
  }
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值