单选按钮选择焦点时，我想显示其他单选按钮，然后显示上一个单选按钮焦点？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>Instant cash</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css"/>
<style>
*{
margin:0px;
padding:0px;
}
body{
font-family:'Roboto';
}
.main{
width:360px;
height:auto;
}
.content-section{
padding:24px 17px 0px 17px;
}
ol.split{
list-style-type:none;
padding:10px 0px 16px 24px;
font-size:17px;
color:#1d2129;
}
ol.split li:before
{
counter-increment:mycounter;
content:"Q" counter(mycounter) ".\00A0\00A0";
font-weight:bold;
}
ol.split li{
text-indent:-1.3em;
padding-top:7px;
color:#1d2129;
}
ol.start {
counter-reset:mycounter;
}
.image-align {
width:100%;
text-align:center;
padding:10px 14px 10px 2px;
}
div.radiogroup div.label {
margin-left:20px;
font-weight:bold;
}
ul.radio{
margin:0;
padding:0;
margin-left:3px;
list-style:none;
}
ul.radio li {
border:1px transparent solid;
border:1.5px #bdbdbd solid;
padding:10px 0px 10px 0px;
margin:5px 0px 5px 0px;
border-radius:2px;
font-size:14px;
color:#767676;
}
ul.radio li.focus {
border:1.8px #ed6745 solid;
color:#ed6745;
}
input[type='radio'] {
-webkit-appearance:none;
width:20px;
height:20px;
border-radius:50%;
outline:none;
box-shadow:0 0 0 2px #6a6868;
margin-left:10px;
}
input[type='radio']:focus{
box-shadow:0 0 0 2px #ed6745;
}
input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin:20% auto;
border-radius:50%;
}
input[type='radio']:checked:before {
background:#ed6745;
}
.radio-button-left{
padding-left:10px;
position:relative;
top:-5px;
}
input[type=text]{
border:0;
outline:0;
width:100%;
padding:12px 0px;
margin:8px 0;
display:inline-block;
background:transparent;
border-bottom:1.5px solid #bdbdbd;
}
input[type=submit] {
width: 100%;
background-color:#e0e0e0;
color:#661d2129;
padding:14px 20px;
margin:8px 0;
border:none;
border-radius:2px;
cursor:pointer;
margin-top:40px;
font-weight:700;
}
input[type=submit]:hover {
background-color:#ed6745;
color:#ffffff;
}
input::placeholder {
color:#767676;
font-size:17px;
}
</style>
</head>
<body>
<div class="container ">
<div class="row content-section">
<ol class="split start">
<li>How many dependent do you have?</li>
</ol>
<div>
<div class="radiogroup">
<ul class="radio">
<li><input type="radio" name="option1" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">0</label></li>
<li><input type="radio" name="option1" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1</label></li>
<li><input type="radio" name="option1" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">2~4</label></li>
<li><input type="radio" name="option1" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Over</label></li>
</ul>
</div>
</div>
<div>
<ol class="split">
<li>What is your income per day?</li>
</ol>
</div>
<div>
<div class="radiogroup1">
<ul class="radio">
<li><input type="radio" name="option2" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Under 1000</label></li>
<li><input type="radio" name="option2" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1000 ~ 2000</label></li>
<li><input type="radio" name="option2" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left" >2000 ~ 3000</label></li>
<li><input type="radio" name="option2" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">3000 ~ 5000</label></li>
</ul>
</div>
</div>
<div>
<ol class="split">
<li>How much do you spend every month?</li>
</ol>
</div>
<div>
<div class="radiogroup1">
<ul class="radio">
<li><input type="radio" name="option3" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Under 1000</label></li>
<li><input type="radio" name="option3" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1000 ~ 2000</label></li>
<li><input type="radio" name="option3" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">2000 ~ 3000</label></li>
<li><input type="radio" name="option3" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">3000 ~ 5000</label></li>
</ul>
</div>
</div>
<div>
<ol class="split">
<li>If you have an enough money, how long time do you need to buy an expensive car?</li>
</ol>
</div>
<div>
<img src="https://s3-ap-south-1.amazonaws.com/static.truebalance.agent/dev/compress/436000000_img_expensive_car.png" alt="car" class="image-align" />
</div>
<div>
<div class="radiogroup1">
<ul class="radio">
<li><input type="radio" name="option4" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1 min</label></li>
<li><input type="radio" name="option4" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1 hour</label></li>
<li><input type="radio" name="option4" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1 day</label></li>
<li><input type="radio" name="option4" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1 week</label></li>
<li><input type="radio" name="option4" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1 month</label></li>
</ul>
</div>
</div>
<div>
<ol class="split">
<li>What do you do?</li>
</ol>
</div>
<div>
<div class="radiogroup1">
<ul class="radio">
<li><input type="radio" name="option5" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Self-employed</label></li>
<li><input type="radio" name="option5" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Employer (salary)</label></li>
<li><input type="radio" name="option5" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Student</label></li>
<li><input type="radio" name="option5" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Unemployed</label></li>
</ul>
</div>
</div>
<div>
<ol class="split">
<li>How many days do you work during a week?</li>
</ol>
</div>
<div>
<div class="radiogroup1">
<ul class="radio">
<li><input type="radio" name="option6" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">0 day</label></li>
<li><input type="radio" name="option6" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">1~ 3 days</label></li>
<li><input type="radio" name="option6" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">4 ~ 5 days</label></li>
<li><input type="radio" name="option6" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">6 ~ 7 days</label></li>
</ul>
</div>
</div>
<div>
<ol class="split">
<li>What's your objectives for taking a loan?</li>
</ol>
</div>
<div>
<div class="radiogroup1">
<ul class="radio">
<li><input type="radio" name="option7" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">To buy sth</label></li>
<li><input type="radio" name="option7" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">Due to a temporal situation of cashflow</label></li>
<li><input type="radio" name="option7" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">To send money to somebody</label></li>
<li><input type="radio" name="option7" value="" onfocus="radioFocus(event)" onblur="radioremove(event)"/><label class="radio-button-left">To pay recharge</label></li>
</ul>
</div>
</div>
<div>
<ol class="split">
<li>What's the name of prime minister in India?</li>
</ol>
</div>
<div>
<input type="text" placeholder="Type here" />
<input type="submit" value="SAVE">
</div>
</div>
</div>
</body>
<script>
function radioFocus( event ) {
var e = event || window.event;
if( e.target )
e.target.parentNode.className = "focus";
else
e.srcElement.parentNode.className = "focus";
}
function radioremove( event ) {
var e = event || window.event;
var node;
if( e.target )
e.target.parentNode.className = "";
else
e.srcElement.parentNode.className = "";
}
</script>
</html>
我要显示聚焦在其他无线电组被关闭之后被收缩的所有区域，然后上一个显示所有区域聚焦。