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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.