Potrditveno polje je izbirno polje, ki uporabnikom omogoča binarno izbiro (true ali false) tako, da ga označijo in počistijo. V bistvu je potrditveno polje ikona, ki se pogosto uporablja v obrazcih GUI in aplikaciji za pridobitev enega ali več vnosov od uporabnika.
- Če je potrditveno polje označeno ali potrjeno, pomeni, da prav ; to pomeni, da je uporabnik izbral vrednost.
- Če potrditveno polje ni označeno ali potrjeno, pomeni, da lažno ; to pomeni, da uporabnik ni izbral vrednosti.
Zapomni si to potrditveno polje se razlikuje od izbirnega gumba in spustnega seznama, ker omogoča več izbir hkrati. V nasprotju z izbirnim gumbom in spustnim menijem lahko izberemo samo eno izmed danih možnosti.
prednaročilno prečkanje drevesa
V tem poglavju bomo videli, kako z uporabo pridobiti vse označene vrednosti potrditvenih polj JavaScript .
Ustvari sintakso potrditvenega polja
Če želite ustvariti potrditveno polje, uporabite zavihek HTML in vnesite = 'checkbox' znotraj zavihka, kot je prikazano spodaj -
Yes
Čeprav lahko potrditveno polje ustvarite tudi tako, da ustvarite predmet potrditvenega polja prek JavaScripta, je ta metoda nekoliko zapletena. O obeh pristopih bomo razpravljali kasneje -
Primeri
Ustvari in pridobi vrednost potrditvenega polja
V tem primeru bomo ustvarili dve potrditveni polji, vendar pod pogojem, da bo moral uporabnik označiti samo eno potrditveno polje med njima. Nato bomo pridobili vrednost označenega potrditvenega polja. Oglejte si spodnjo kodo:
Kopiraj kodo
<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> Preizkusite zdaj Izhod
java zbirke java
Če označite ja potrditveno polje in nato kliknite na Predloži gumb, se prikaže sporočilo, kot je prikazano spodaj:
Če kliknete na Predloži ne da bi označili katero koli potrditveno polje, se bo prikazalo sporočilo o napaki.
Podobno lahko preverite izhod za druge pogoje.
polje java
Pridobite vse vrednosti potrditvenega polja
Zdaj boste videli, kako pridobiti vse vrednosti potrditvenih polj, ki jih označi uporabnik. Oglejte si spodnji primer.
Kopiraj kodo
<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> Preizkusite zdaj Izhod
Tukaj lahko vidite, da je bila vrnjena vrednost vseh označenih potrditvenih polj.
Različne kode JavaScript za pridobitev vrednosti označenih potrditvenih polj
Koda JavaScript za pridobitev vseh označenih vrednosti potrditvenih polj
prolog jezik
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Uporabite lahko tudi spodnjo kodo, da dobite vse vrednosti označenih potrditvenih polj.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Elementi potrditvenega polja torej omogočajo več izbir. To pomeni, da lahko uporabniki izberejo eno ali več možnosti po lastni izbiri, opredeljenih v obrazcu HTML. Izberete lahko tudi vsa potrditvena polja. V zgornjem primeru ste to že videli.