在 javascript 中隐藏时显示/隐藏和清除单选按钮值

Question

I am trying to show/hide the radio button when a radio button is checked and when the radio button is hidden i need to clear the value of radio button when hidden Here is the code

<script type="text/javascript">
function show2(){
  document.getElementById('div1').style.display = 'block';
  
}
function show1(){
  document.getElementById('div1').style.display ='none';
}
</script>

      <label><input type="radio" name="a1" class="mass" id="mass3"   value="Mass Sponsors" onclick="show1();"> Mass1 Sponsors <i class="fa fa-inr" aria-hidden="true"></i>5000</label>
    <label><input type="radio" name="a1" class="mass" id="mass2"   value="Mass Intention" onclick="show2();"> Mass Intention <i class="fa fa-inr" aria-hidden="true"  ></i>150/- or 200/-</label>

   <div id="div1" class="hide">
   <div class="radio">
<label><input type="radio" name="a2"  id="a1" class="mass" value="100"><i class="fa fa-inr" aria-hidden="true"></i>100</label>
         <label><input type="radio" name="a2" class="mass" id="a2"   value="150">  <i class="fa fa-inr" aria-hidden="true"></i>150</label>
 <label><input type="radio" name="a2"  id="amount4" class="mass" value="200"> <i class="fa fa-inr" aria-hidden="true"></i>200</label>
 
</div>

Answer 1

You could do it like this:

function show1() {
  document.getElementById('div1').style.display = 'none';
  var ele = document.getElementsByName("a2");
  for (var i = 0; i < ele.length; i++)
    ele[i].checked = false;
}

Demo

 function show2() { document.getElementById('div1').style.display = 'block'; } function show1() { document.getElementById('div1').style.display = 'none'; var ele = document.getElementsByName("a2"); for (var i = 0; i < ele.length; i++) ele[i].checked = false; }

 <label><input type="radio" name="a1" class="mass" id="mass3" value="Mass Sponsors" onclick="show1();"> Mass1 Sponsors <i class="fa fa-inr" aria-hidden="true"></i>5000</label> <label><input type="radio" name="a1" class="mass" id="mass2" value="Mass Intention" onclick="show2();"> Mass Intention <i class="fa fa-inr" aria-hidden="true" ></i>150/- or 200/-</label> <div id="div1" class="hide"> <div class="radio"> <label><input type="radio" name="a2" id="a1" class="mass" value="100"><i class="fa fa-inr" aria-hidden="true"></i>100</label> <label><input type="radio" name="a2" class="mass" id="a2" value="150"> <i class="fa fa-inr" aria-hidden="true"></i>150</label> <label><input type="radio" name="a2" id="amount4" class="mass" value="200"> <i class="fa fa-inr" aria-hidden="true"></i>200</label> </div> </div>