Puoi farlo in due modi. O in puro CSS:
codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
.nascosto {
display: none;
}
#chBxEstendi:checked ~ span.nascosto {
display: inline;
}
#chBxEstendi:checked ~ br.nascosto {
display: block;
}
</style>
</head>
<body>
<form name="tuoForm">
<input type="checkbox" name="tuaCheckbox" id="chBxEstendi" /> <label for="chBxEstendi">mostra altri due campi</label>
<span class="nascosto">Altro campo #1: <input type="text" name="tuaTxtBox1" /></span><br class="nascosto" />
<span class="nascosto">Altro campo #2: <input type="text" name="tuaTxtBox1" /></span><br class="nascosto" />
<input type="submit" value="Invia" />
</form>
</body>
</html>
O in puro JavaScript:
codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function nascondiMostra (bShow) {
Array.prototype.forEach.call(document.querySelectorAll(".nascosto"), function (oElement) {
oElement.style[bShow ? "removeProperty" : "setProperty"]("display", "none");
});
}
window.onload = function () {
nascondiMostra(document.tuoForm.tuaCheckbox.checked);
};
</script>
</head>
<body>
<form name="tuoForm">
<input type="checkbox" name="tuaCheckbox" id="chBxEstendi" onchange="nascondiMostra(this.checked);" /> <label for="chBxEstendi">mostra altri due campi</label>
<span class="nascosto">Altro campo #1: <input type="text" name="tuaTxtBox1" /></span><br class="nascosto" />
<span class="nascosto">Altro campo #2: <input type="text" name="tuaTxtBox1" /></span><br class="nascosto" />
<input type="submit" value="Invia" />
</form>
</body>
</html>
In puro CSS lo puoi fare solamente se gli elementi da mostrare vengono DOPO la checkbox e se sono nodi "fratelli". Se queste condizioni sono soddisfatte è la soluzione che personalmente preferisco.
P.S. Esiste un "trucchetto" per ovviare a questo inconveniente della "successione". Basta mettere la checkbox in cima alla pagina e renderla "nascosta". Al suo posto è possibile usare una label, che a quel punto potresti piazzare dove ti pare. Qui hai un esempio che avevo scritto un po' di tempo fa e che ti farà capire meglio di ogni spiegazione: https://developer.mozilla.org/@api/d...-elements.html 
ma visto che si deva fare una scelta meglio se usi i campi radio al posto dei checkbox
Permessi di invio
Rispondi quotando