Come nascondere caselle di controllo in HTML

July 17

Potrebbe essere necessario nascondere una casella di controllo HTML dopo un visitatore di selezionare un'opzione in un'altra parte della pagina Web che rende l'opzione casella di controllo non valida. Ad esempio, si dispone di una casella di controllo su un sito di vendita di auto per 4 ruote motrici come caratteristica opzionale; l'utente seleziona un modello di auto che non supporta 4 ruote motrici, quindi è necessario nascondere la casella di controllo per esso. È possibile utilizzare il codice JavaScript per trasformare l'attributo visibilità CSS di caselle di controllo HTML acceso o spento.

istruzione

1 Aprire il file sorgente HTML in un editor di testo, come Blocco note.

2 Aggiungere una funzione JavaScript nella sezione "<head>" del file HTML, aggiungendo il codice "<script type =" text / javascript "> Funzione changeCheckBoxVisibility (id, IsVisible) {if (== IsVisible 1) {document.getElementById (id) .style.display = 'block';} else {document.getElementById (id) .style.display = 'none';}} </ script> ".

3 Aggiungere il codice "<div id =" CheckBox1 ">" tag a destra prima la casella di controllo "<input>" e "</ div>" dopo il testo della casella di controllo. Ad esempio, "<div id =" CheckBox1 "> <input type =" checkbox "name =" "value =" cbox1 valore1 "/> text casella di controllo </ div>". Questo crea una divisione con un id che può essere passato alla funzione di rendere la casella di controllo nascosto.

4 Aggiungere un gestore di eventi, come ad esempio di un pulsante "onClick", per richiamare la funzione. Aggiungere il codice "<input type =" "value =" pulsante Cambia visibilità "onclick =" changeCheckBoxVisibility ( 'CheckBox1', 0); ">" in cui si desidera visualizzare il pulsante. Quando viene chiamato la casella di controllo scompare.

5 Salvare il file HTML, caricarlo sul server e fare clic sul pulsante "Modifica visibilità" per rendere la casella di controllo nascosto.