Javascript mostrare/nascondere una textarea

**mrosaria** · 05-07-2013, 15:14

Salve sto utilizzando questo codice per visualizzare la textarea quando si seleziona il checkbox :
Questo codice si riferisce ad 1 textarea:
Come posso far visulizzare piu' text area selezionando il checkbox?
In pratica quando clicco sul checkbox si visualizzano 3 textarea

var checkboxes;
window.addEvent('domready', function() {
var i, checkbox, textarea, div, textbox;
checkboxes = {};
// link the checkboxes and textarea ids here
checkboxes['checkbox_1'] = 'textarea_1';

for ( i in checkboxes ) {
checkbox = $(i);
textbox = $(checkboxes[i]);
div = $(textbox.id + '_container_div');
div.dissolve();
showHide(i);
addEventToCheckbox(checkbox);
}

function addEventToCheckbox(checkbox) {
checkbox.addEvent('click', function(event) {
showHide(event.target.id);
});
}
});

function showHide(id) {
var checkbox, textarea, div;
if(typeof id == 'undefined') {
return;
}
checkbox = $(id);
textarea = checkboxes[id];
div = $(textarea + '_container_div');
textarea = $(textarea);
if(checkbox.checked) {
div.setStyle('display', 'block');
//div.reveal();
div.setStyle('display', 'block');
textarea.disabled = false;
} else {
div.setStyle('display', 'none');
//div.dissolve();
textarea.value = '';
textarea.disabled = true;
}
}

**cavicchiandrea** · 05-07-2013, 20:49

Invece di riferiti ad un id (come mi sembra di capire) usa una classe che assocerai alle textarea che vuoi "comandare", non saprei scriverti il cidice perché non conosco mootools

**carlomarx** · 07-07-2013, 14:35

Vedi se ti va bene questa soluzione in puro CSS:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento HTML</title>
<style type="text/css">
input[type="checkbox"].textarea_show-hide ~ textarea.optional_textarea {
	display: none;
}

input[type="checkbox"].textarea_show-hide:checked ~ textarea.optional_textarea {
	display: block;
}
</style>
</head>
 
<body>



	<input type="checkbox" name="checkbox_1" class="textarea_show-hide" />
	<textarea class="optional_textarea" name="campo1" /></textarea>
	<textarea class="optional_textarea" name="campo2" /></textarea>
	<textarea class="optional_textarea" name="campo3" /></textarea>
</p>



	<input type="checkbox" name="checkbox_2" class="textarea_show-hide" />
	<textarea class="optional_textarea" name="campo4" /></textarea>
</p>



	<input type="checkbox" name="checkbox_3" class="textarea_show-hide" />
	<textarea class="optional_textarea" name="campo5" /></textarea>
	<textarea class="optional_textarea" name="campo6" /></textarea>
</p>
</body>
</html>

**mrosaria** · 07-07-2013, 18:01

Ciao, questa soluzione è un po complessa visto che il sito è gestito tramite Cms.

Conosci qualche codice Javescript che faccia al caso mio?

Discussione: Javascript mostrare/nascondere una textarea

Strumenti discussione

Ricerca discussione

Visualizza

Javascript mostrare/nascondere una textarea

Permessi di invio