Riepilogo: in questo tutorial, imparerai come usare JavaScript per verificare se una casella di controllo è selezionata, per ottenere i valori delle caselle di controllo selezionate e selezionare / deselezionare tutte le caselle di controllo.

Verifica se una casella di controllo è selezionata

Per ottenere lo stato di una casella di controllo sia selezionata o deselezionata, attenersi alla seguente procedura:

• in Primo luogo, selezionare la casella di controllo utilizza la selezione di metodi DOM come getElementById() o querySelector().
• Quindi, accedere alla proprietàchecked dell’elemento checkbox., Se la sua proprietàchecked ètrue, la casella di controllo è selezionata; altrimenti, non lo è.,ox è selezionata, è possibile utilizzare il codice riportato di seguito:

  Code language: JavaScript (javascript)

  Inoltre, è possibile utilizzare il tag querySelector() per verificare se il :checked selettore di non ritorno null in questo modo:

  Code language: JavaScript (javascript)

  Se una casella di controllo non è presente il value attributo, il suo valore predefinito è 'on':

  Code language: HTML, XML (xml)

  Se si ottiene il value attributo di una casella di controllo, si ottiene sempre il 'on' string se la casella di controllo è selezionata o meno., Per esempio:

  Code language: JavaScript (javascript)

  si Veda il seguente esempio:

  di Ottenere valori di più le caselle di controllo

  Supponendo che si dispone di tre caselle di controllo e si desidera ottenere i valori di tutte le caselle di controllo:

  Code language: HTML, XML (xml)

  Per fare questo, è necessario aggiungere due ulteriori attributi HTML per ogni casella di controllo: name e value ., Tutte e tre le caselle di controllo devono avere lo stesso nome, ma di valori distinti, per esempio:

  selezionare le caselle di controllo, è possibile utilizzare il tag querySelector() metodo:

  Code language: JavaScript (javascript)

  E raccogliere il valore di ogni checkbox:

  Code language: JavaScript (javascript)

  Mettere tutto insieme:

  checkboxes.js file:

  selezionare / Deselezionare tutte le caselle di controllo

  a Volte, si potrebbe desiderare di selezionare e deselezionare tutte le caselle di controllo in un form., Vedere il seguente esempio:

  Quando si fa clic sul pulsante con l’idbtn, tutte le caselle di controllo verranno selezionate se non lo sono e deselezionate se sono già selezionate.

  In primo luogo, sviluppare una funzionecheck()che controlla o deseleziona tutte le caselle di controllo in base a un argomento di input:

  Quando si fa clic sul pulsante, è possibile chiamare la funzione check() per selezionare tutte le caselle di controllo. La prossima volta, quando fai clic sul pulsante, dovrebbe deselezionare tutte le caselle di controllo.,

  Per fare questo switch, è necessario riassegnare il gestore di eventi click ogni volta che l’evento click si attiva.

  selezionare il pulsante e allegare un clic listener di eventi:

  Code language: JavaScript (javascript)

  checkAll() funzione è come indicato di seguito:

  Code language: JavaScript (javascript)

  uncheckAll() funzione è:

  Come funziona:

  Se si fa clic sul pulsante, il uncheck() viene richiamata la funzione di controllare tutte le caselle di controllo. Quindi, riassegna la funzioneuncheckAll() al gestore di eventionclick.,

  La prossima volta, se si fa clic sul pulsante, viene richiamata la funzione uncheckAll() per deselezionare tutte le caselle di controllo e riassegnare la funzione checkAll() al gestore di eventi onclick.

  Riepilogo

  • Utilizzare il selettore checkbox.checkedo :check per determinare se una casella di controllo è selezionata.
  • Interrogare l’attributovalue per ottenere il valore di una casella di controllo.
  • Questo tutorial è stato utile ?
  • Sì