Una casella di controllo è una casella di selezione che consente agli utenti di effettuare la scelta binaria (vero o falso) selezionandola e deselezionandola. Fondamentalmente, una casella di controllo è un'icona, che viene spesso utilizzata nei moduli e nelle applicazioni della GUI per ottenere uno o più input dall'utente.
- Se una casella di controllo è contrassegnata o selezionata, indica di farlo VERO ; ciò significa che l'utente ha selezionato il valore.
- Se una casella di controllo non è contrassegnata o non è selezionata, è indicata a falso ; ciò significa che l'utente non ha selezionato il valore.
Ricordati che La casella di controllo è diversa dal pulsante di opzione e dall'elenco a discesa perché consente più selezioni contemporaneamente. Al contrario, il pulsante di opzione e il menu a discesa ci consentono di sceglierne solo una tra le opzioni fornite.
In questo capitolo, ora vedremo come ottenere tutti i valori delle caselle di controllo contrassegnate utilizzando JavaScript .
Crea la sintassi della casella di controllo
Per creare una casella di controllo utilizza la scheda HTML e digita='checkbox' all'interno della scheda come mostrato di seguito:
Yes
Sebbene sia possibile creare una casella di controllo creando l'oggetto casella di controllo tramite JavaScript, questo metodo è un po' complicato. Discuteremo entrambi gli approcci in seguito-
Esempi
Crea e ottieni il valore della casella di controllo
In questo esempio creeremo due caselle di controllo ma con la condizione che l'utente dovrà contrassegnare solo una casella di controllo tra di loro. Quindi recupereremo il valore della casella di controllo contrassegnata. Vedi il codice qui sotto:
nullpointerException
Copia codice
<h2>Create a checkbox and get its value</h2> <h3> Are you a web developer? </h3> Yes: No: <br> <br> Submit <br> <h4> <h4> function checkCheckbox() { var yes = document.getElementById('myCheck1'); var no = document.getElementById('myCheck2'); if (yes.checked == true && no.checked == true){ return document.getElementById('error').innerHTML = 'Please mark only one checkbox either Yes or No'; } else if (yes.checked == true){ var y = document.getElementById('myCheck1').value; return document.getElementById('result').innerHTML = y; } else if (no.checked == true){ var n = document.getElementById('myCheck2').value; return document.getElementById('result').innerHTML = n; } else { return document.getElementById('error').innerHTML = '*Please mark any of checkbox'; } } </h4></h4> Provalo adesso Produzione
Se contrassegni il SÌ casella di controllo e quindi fare clic su Invia pulsante, verrà visualizzato un messaggio come mostrato di seguito:
Se fai clic su Invia senza selezionare alcuna casella di controllo, verrà visualizzato un messaggio di errore.
Allo stesso modo, puoi controllare l'output per altre condizioni.
Ottieni tutto il valore della casella di controllo
Ora vedrai come ottenere tutti i valori delle caselle di controllo contrassegnati dall'utente. Vedere l'esempio seguente.
listnode
Copia codice
<h2>Create a checkbox and get its value</h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> Check all <br> <br> Submit <br> <h4></h4> function checkAll() { var inputs = document.querySelectorAll('.pl'); for (var i = 0; i <inputs.length; i++) { inputs[i].checked="true;" } function getcheckboxvalue() var l1="document.getElementById('check1');" l2="document.getElementById('check2');" l3="document.getElementById('check3');" l4="document.getElementById('check4');" l5="document.getElementById('check5');" l6="document.getElementById('check6');" res=" " ; if (l1.checked="=" true){ pl1="document.getElementById('check1').value;" + ','; else (l2.checked="=" pl2="document.getElementById('check2').value;" (l3.checked="=" document.write(res); pl3="document.getElementById('check3').value;" (l4.checked="=" pl4="document.getElementById('check4').value;" (l5.checked="=" pl5="document.getElementById('check5').value;" (l6.checked="=" pl6="document.getElementById('check6').value;" pl6; return document.getelementbyid('result').innerhtml="You have not selected anything" ' languages'; < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>By executing this code, we will get a response like the below screenshot having some programming languages where you can choose the language you know.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-3.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Here, you click on the <strong>Check all</strong> button, it will mark all the programming language checkboxes. After that, click on the <strong>Submit</strong> button to get the response.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-4.webp" alt="How to get all checked checkbox value in JavaScript"> <p>Although you can select the language one by one by marking an individual checkbox and then click on the <strong>Submit</strong> button to get the result.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-5.webp" alt="How to get all checked checkbox value in JavaScript"> <p> <strong>Output: When you have not selected anything</strong> </p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-6.webp" alt="How to get all checked checkbox value in JavaScript"> <h2>Get all marked checkboxes value using querySelectorAll() method</h2> <p>There is one more method to get all selected values from the checkboxes marked by the user. You will now see how to get the value of all checkboxes using the querySelectorAll() method marked by the user. This will fetch the checkboxes values from the HTML form and display the result.</p> <h3>Get all checkbox value</h3> <p>Now, you will see how to get all checkbox values marked by the user. See the below example.</p> <p> <strong>Copy Code</strong> </p> <pre> <h2> Get all marked checkboxes value </h2> <h4> Select the programming language, you know </h4> <tr> <td> Java: </td> <td> PHP: </td> </tr> <tr> <td> Angular: </td> <td> CSS: </td> </tr> <tr> <td> Python: </td> <td> Android: </td> <br> <br> Submit <br> <h4></h4> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </tr></pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>Here, you can see that all marked checkboxes value has been returned.</p> <img src="//techcodeview.com/img/javascript-tutorial/63/how-get-all-checked-checkbox-value-javascript-7.webp" alt="How to get all checked checkbox value in JavaScript"> <h3>Different JavaScript codes to get marked checkboxes value</h3> <p>JavaScript Code to get all checked checkbox values</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } </pre> <p>You can also use the below code to get all checked checkboxes values.</p> <pre> document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } </pre> <p>So, checkbox elements allow to multi-select. This means that the users can select one or more options of their choice defined in the HTML form. Even you can select all the checkboxes. In the above example, you have already seen that.</p> <hr></inputs.length;></tr> Provalo adesso Produzione
Qui puoi vedere che il valore di tutte le caselle di controllo contrassegnate è stato restituito.
Diversi codici JavaScript per ottenere il valore delle caselle di controllo contrassegnate
Codice JavaScript per ottenere tutti i valori delle caselle di controllo selezionati
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Puoi anche utilizzare il codice seguente per ottenere tutti i valori delle caselle di controllo selezionate.
stringa java
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Pertanto, gli elementi casella di controllo consentono la selezione multipla. Ciò significa che gli utenti possono selezionare una o più opzioni di loro scelta definite nel modulo HTML. Anche tu puoi selezionare tutte le caselle di controllo. Nell'esempio sopra, lo hai già visto.