I want to hide/visible a form based on checkbox in google webapp. If the checkbox is in checked condition then the form will be in visible else it should in hidden. I want to try with below mentioned code block. But not happen.
if (document.getElementById("df1").checked) {
document.getElementById("co").style.visibility = "hidden";
} else {
document.getElementById("co").style.visibility = "visible";
}
<form id="co" style="visibility : hidden">
<br>
<label type="text">Name </label><input type="text">
<br>
<label type="text">Roll No. </label><input type="number" value="0" min="0">
<br><br>
<input type="submit" value="submit">
<input type="checkbox" id="df1">
window.addEventListener('load', () => { // when the elements are available
document.getElementById('df1').addEventListener('click', (e) => {
const show = e.target.checked;
document.getElementById("co").style.visibility = show ? 'visible' : 'hidden';
});
});
<form id="co" style="visibility : hidden">
<label type="text">Name </label><input type="text">
<br>
<label type="text">Roll No. </label><input type="number" value="0" min="0">
<br><br>
<input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">
Using hidden (so the form does not take up space):
window.addEventListener('load', () => { // when the elements are available
document.getElementById('df1').addEventListener('click', (e) => {
document.getElementById("co").hidden = !e.target.checked;
});
});
<form id="co" hidden>
<label type="text">Name </label><input type="text">
<br>
<label type="text">Roll No. </label><input type="number" value="0" min="0">
<br><br>
<input type="submit" value="submit">
</form>
<input type="checkbox" id="df1">