[Js] checkbox che visualizza div

[unreg]

Salve,

ho una pagina xhtml 1.0 Strict nella quale c'è un form con diversi checkbox ad sotto di essi c'è un div.

es.

<form id="mioform">
  <input name="pacchetto" type="checkbox" id="pacchetto01" value="1" />
  <div id="info_pac01">Testo testo testo testo testo testo</div>
  <input name="pacchetto" type="checkbox" id="pacchetto02" value="2" />
  <div id="info_pac02">Testo testo testo testo testo testo</div>
</form>

vorrei che tutti i div del form al carricamento della pagina siano invisibili (display: none ad poi in base al checkbox selezionato diventi visibile il div sottostante.

es. seleziono il checkbox "pacchetto02" visualizzo il div "info_pac02"


per favore mi postate lo scritp js necessario per ciò ?

grazie !

[Andrea1979]

<form id="mioform">
  <input name="pacchetto" type="checkbox" id="pacchetto01" value="1" onclick="document.getElementById('info_pac01').style.display = (this.checked ? 'block' : 'none');" />
  <div id="info_pac01" style="display: none;">Testo testo testo testo testo testo</div>
  <input name="pacchetto" type="checkbox" id="pacchetto02" value="2" onclick="document.getElementById('info_pac02').style.display = (this.checked ? 'block' : 'none');"  />
  <div id="info_pac02" style="display: none;">Testo testo testo testo testo testo</div>
</form>

[unreg]

grazie mille !

[Mich_]

Il codice e` corretto, ma non e` valido in XHTML.

Per farlo acettare da XHTML Strict devi scrivere:

onclick="document\.getElementById(\\'info_pac01\\').style.display \= this.checked \? \\'block\\' : \\'none\\';"

Nota: c'e` sempre UNA backslash davanti a tutti i caratteri che hanno un significato in HTML.

[fcaldera]

Interessante. Dove si possono trovare informazioni specifiche sull'uso di javascript in XHTML Strict...??

Quella sintassi vale per qualsiasi blocco js oppure se si trova solo come valore di un attributo di un elemento xhtml??

[Mich_]

Quella sintassi vale in qualsiasi blocco JS, anche in uno <script> all'interno della stessa pagina (ma in quel caso conviene invece usare un commento CDATA).

In realta` in un codice XHTML non ci possono stare alcuni caratteri che non servano per quanto previsto e che devono quindi essere preceduti da backslash.
I piu` importanti sono < > = & ' "

Non ricordo dove avevo visto questo; forse nelle pagine di introduzione all'XHTML (differenze fra HTML e XHTML), che erano popolari quando e` iniziato ad essere diffuso l'XHTML (quando sono usciti i browser che lo supportano).

[fcaldera]

ho visto che c'e' una backslash prima del primo punto (dopo document) è un errore oppure va anche lì??

[Mich_]

Originariamente inviato da fcaldera
ho visto che c'e' una backslash prima del primo punto (dopo document) è un errore oppure va anche lì??

Non mi ricordo piu`, se anche il punto e` tra i caratteri proibiti. E non ricordo neppure se il validatore XHTML del W3C rileva tali errori. Comunque si puo` sempre provare a validare mettendo e non mettendo la backslash davanti al punto.

[fcaldera]

ok, grazie per il suggerimento. Penso comunque che mi limiterò
a fare blocchi js con CData e semplici richiami a funzioni negli attributi... così risolvo in modo definitivo.

E' vero che per istruzioni brevi aumenti il codice però non ti devi preoccupare di stare attento ai caratteri speciali...

[Mich_]

però non ti devi preoccupare di stare attento ai caratteri speciali...

Non sempre e` possibile.

Esempio:
onclick="funzione(\\'ciao\\');"
Cioe` se devi passare un parametro di tipo stringa ad una funzione.