自定义单选框刷新时，自定义样式刷新，但是表单选中的值不复位。-CSDN博客

下面是选择支付场景

页面跳转前选中的是第二个选项，选中的值也是第二个。但是返回时自定义样式会复原选中第一个，但是隐藏的input选中的值依旧是第二个。发现每次回到页面都会触发onload，所以用sessionStorage在提交跳转时记录下选中状态，onload时再做判断就可以解决这个问题。

<ul class="detail detail2">
	<li>
		<div class="li_left"><span class="wx_icon"></span><p>微信支付</p></div>
		<div class="li_right">
			<label for="payType" class="radio_label checked wx_lab">
			</label>
			<input type="radio" value="1"  id="wx" name="payType" checked="checked"/>
		</div>
	</li>
	<li>
		<div class="li_left"><span class="zfb_icon"></span><p>支付宝支付</p></div>
		<div class="li_right">
			<label for="payType" class="radio_label zfb_lab">
			</label>
			<input type="radio" value="2" id="zfb" name="payType"/>
		</div>
	</li>
</ul>
复制代码

.detail2 .li_right{
	position: relative;
}
.li_right label{
	width:.38rem;
	height:.38rem;
	border-radius: 50%;
	position: absolute;
	top: .27rem;
	right: .33rem;
	z-index: 99;
	border:2px solid rgba(204,204,204,1);
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.li_right .checked{
	background: url('../image/chosen.png');
	background-size: cover;
	border: 0;
}
.li_right input{
	/* display: none; ios无效*/
	width:.38rem;
	height:.38rem;
	top: .27rem;
	right: .33rem;
	z-index: 100;
    -webkit-appearance: none;
  	outline: none;
	position: absolute;
	opacity: 0.01
}
复制代码

// 弹窗
$('.sub_btn').click(function(event) {
var i = $("input[type='radio']:checked").val();
	console.log($("input[type='radio']:checked").val());
	if(i=='1'){
		sessionStorage.setItem('flag',1)
		location.href = "http://www.baidu.com"
	}else{
		sessionStorage.setItem('flag',2)
		location.href = "http://www.163.com"
	}
});
$('.mock_wrap').click(function(event) {
	$('.pop_up,.mock_wrap').hide();
});
window.onload= function(){
	if(sessionStorage.getItem('flag')=='2'){
		$('.wx_lab').removeClass('checked')
		$('.zfb_lab').addClass('checked')
	}else{
		$('.wx_lab').addClass('checked')
		$('.zfb_lab').removeClass('checked')
	}
}
复制代码