Potvrdni okvir je okvir za odabir koji korisnicima omogućuje da naprave binarni izbor (točno ili netočno) tako da ga označi i poništi. U osnovi, potvrdni okvir je ikona koja se često koristi u GUI obrascima i aplikacijama za dobivanje jednog ili više unosa od korisnika.
- Ako je potvrdni okvir označen ili potvrđen, to znači da pravi ; to znači da je korisnik odabrao vrijednost.
- Ako potvrdni okvir nije označen ili označen, znači da lažno ; to znači da korisnik nije odabrao vrijednost.
Zapamti to potvrdni okvir razlikuje se od radio gumba i padajućeg popisa jer dopušta više odabira odjednom. Nasuprot tome, radio gumb i padajući izbornik omogućuju nam da odaberemo samo jednu od danih opcija.
U ovom poglavlju, sada ćemo vidjeti kako koristiti sve označene vrijednosti potvrdnih okvira JavaScript .
Stvorite sintaksu potvrdnog okvira
Za izradu potvrdnog okvira upotrijebite HTML karticu i upišite='checkbox' unutar kartice kao što je prikazano u nastavku -
java korisnički unos
Yes
Iako također možete stvoriti potvrdni okvir stvaranjem objekta potvrdnog okvira putem JavaScripta, ali ova metoda je malo komplicirana. Kasnije ćemo razgovarati o oba pristupa -
datotečni sustav u linuxu
Primjeri
Stvorite i dohvatite vrijednost potvrdnog okvira
U ovom primjeru stvorit ćemo dva potvrdna okvira, ali uz uvjet da korisnik mora označiti samo jedan potvrdni okvir između njih. Zatim ćemo dohvatiti vrijednost označenog potvrdnog okvira. Pogledajte kod u nastavku:
Kopiraj kod
<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> Testirajte sada Izlaz
Ako označite Da potvrdni okvir, a zatim kliknite na podnijeti gumb, prikazat će se poruka kao što je prikazano u nastavku:
Ako kliknete na podnijeti bez označavanja bilo kojeg potvrdnog okvira, prikazat će se poruka o pogrešci.
Slično, možete provjeriti izlaz za druge uvjete.
for petlja u Javi
Dohvati sve vrijednosti potvrdnog okvira
Sada ćete vidjeti kako dobiti sve vrijednosti potvrdnih okvira koje je označio korisnik. Pogledajte donji primjer.
Kopiraj kod
<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> Testirajte sada Izlaz
foreach tipkalopis
Ovdje možete vidjeti da je vraćena vrijednost svih označenih potvrdnih okvira.
Različiti JavaScript kodovi za dobivanje vrijednosti označenih potvrdnih okvira
JavaScript kôd za dobivanje svih označenih vrijednosti potvrdnih okvira
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Također možete upotrijebiti donji kod za dobivanje svih vrijednosti označenih potvrdnih okvira.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Dakle, elementi potvrdnog okvira omogućuju višestruki odabir. To znači da korisnici mogu odabrati jednu ili više opcija po vlastitom izboru definiranih u HTML obrascu. Čak možete označiti sve potvrdne okvire. U gornjem primjeru ste to već vidjeli.