var checkbox = document.getElementById('checkbox');
var checkbox1 = document.getElementById('checkbox1');
var delivery_div = document.getElementById('delivery');
var delivery_div1 = document.getElementById('delivery1');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
delivery_div.style['display'] = 'block';
} else {
delivery_div.style['display'] = 'none';
}
document.getElementById("checkbox1").checked = false;
delivery_div1.style['display'] = 'none';
};
checkbox1.onclick = function() {
console.log(this);
if (this.checked) {
delivery_div1.style['display'] = 'block';
} else {
delivery_div1.style['display'] = 'none';
}
document.getElementById("checkbox").checked = false;
delivery_div.style['display'] = 'none';
};
<div class="form-group">
check any checkbox
1<input id="checkbox" type=checkbox name=check>
2<input id="checkbox1" type=checkbox name=check>
</div>
<div id="delivery" style="display:none;">
<div class="form-group">
certain form content is shown
</div>
</div>
<div id="delivery1" style="display:none;">
<div class="form-group">
different from above form content is shown
</div>
</div>
NOTE This code is used for displaying only certain content of the form instead of displaying all the form content. I am using it to stop the users from filling all the form fields if those are irrelevant to the user. Please feel free to change the code. :)
Aucun commentaire:
Enregistrer un commentaire