Hvordan skjule avmerkingsboksene i HTML

June 19

Du må kanskje skjule en HTML-boksen etter at en besøkende velger et alternativ i en annen del av websiden som gjengir boksen alternativet ugyldig. For eksempel har du en avmerkingsboks på et bilsalg stedet for 4-hjulstrekk som en tilleggsfunksjon; brukeren velger en bilmodell som ikke støtter 4-hjulstrekk, så du må gjemme boksen for det. Du kan bruke Javascript-kode for å slå av CSS synlighet egenskap av HTML avmerkingsboksene på eller av.

Bruksanvisning

1 Åpne HTML-kildefilen i et tekstredigeringsprogram, for eksempel Notisblokk.

2 Legg en Javascript-funksjonen på "<head>" i HTML-filen, og legger til koden "<script type =" text / javascript "> funksjon changeCheckBoxVisibility (id, isvisible) {if (isvisible == 1) {document.getElementById (id) .style.display = 'block';} else {document.getElementById (id) .style.display = "none";}} </ script> ".

3 Legg inn koden "<div id =" checkbox1 ">" rett før boksen "<input>" tag, og "</ div>" etter boksen tekst. For eksempel "<div id =" checkbox1 "> <input type =" checkbox "name =" cbox1 "value =" value1 "/> -ruten tekst </ div>". Dette skaper en divisjon med en id som kan sendes til funksjonen for å gjøre boksen skjult.

4 Legg en hendelseshåndterer, som for eksempel en knapp "onClick", for å kalle funksjonen. Legg inn koden "<input type =" button "value =" Endre synlighet "onclick =" changeCheckBoxVisibility ( 'checkbox1', 0); ">" der du vil at knappen skal vises. Når kalt boksen vil forsvinne.

5 Lagre HTML-filen, legger du det på serveren din og klikk på "Endre Synlighet" -knappen for å gjøre boksen skjult.