Zaškrtávacie políčko je výberové políčko, ktoré umožňuje používateľom vykonať binárny výber (pravda alebo nepravda) jeho začiarknutím a zrušením začiarknutia. Začiarkavacie políčko je v podstate ikona, ktorá sa často používa vo formulároch a aplikáciách GUI na získanie jedného alebo viacerých vstupov od používateľa.
- Ak je začiarkavacie políčko označené alebo začiarknuté, znamená to pravda ; to znamená, že používateľ vybral hodnotu.
- Ak začiarkavacie políčko nie je označené alebo nie je začiarknuté, znamená to falošný ; to znamená, že používateľ nevybral hodnotu.
Zapamätaj si to začiarkavacie políčko sa líši od prepínača a rozbaľovacieho zoznamu, pretože umožňuje viacero výberov naraz. Naproti tomu prepínač a rozbaľovacia ponuka nám umožňujú vybrať len jednu z daných možností.
V tejto kapitole teraz uvidíme, ako získať všetky označené hodnoty začiarkavacieho políčka pomocou JavaScript .
Vytvoriť syntax začiarkavacieho políčka
Ak chcete vytvoriť začiarkavacie políčko, použite kartu HTML a zadajte hodnotu='začiarkavacie políčko' vnútri karty, ako je uvedené nižšie -
Yes
Začiarkavacie políčko môžete vytvoriť aj vytvorením objektu začiarkavacieho políčka pomocou JavaScriptu, ale táto metóda je trochu komplikovaná. O oboch prístupoch budeme diskutovať neskôr -
Príklady
Vytvorte a získajte hodnotu začiarkavacieho políčka
V tomto príklade vytvoríme dve začiarkavacie políčka, ale s podmienkou, že medzi nimi bude musieť používateľ označiť iba jedno začiarkavacie políčko. Potom načítame hodnotu označeného checkboxu. Pozrite si kód nižšie:
Kopírovať kód
<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> Vyskúšajte to Výkon
Ak označíte Áno začiarknite políčko a potom kliknite na Predložiť tlačidlo, zobrazí sa správa, ako je uvedené nižšie:
Ak kliknete na Predložiť bez označenia niektorého z políčok, zobrazí sa chybové hlásenie.
python sort dictionary
Podobne môžete na výstupe skontrolovať ďalšie podmienky.
Získajte všetky hodnoty začiarkavacieho políčka
Teraz uvidíte, ako získať všetky hodnoty začiarkavacích políčok označené používateľom. Pozrite si príklad nižšie.
Kopírovať kód
<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> Vyskúšajte to Výkon
Tu môžete vidieť, že hodnota všetkých označených políčok bola vrátená.
Rôzne kódy JavaScript na získanie hodnoty označených začiarkavacích políčok
Kód JavaScript na získanie všetkých hodnôt začiarknutých políčok
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Môžete tiež použiť nižšie uvedený kód na získanie všetkých hodnôt začiarknutých políčok.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Prvky začiarkavacieho políčka teda umožňujú viacnásobný výber. To znamená, že používatelia si môžu vybrať jednu alebo viac možností podľa vlastného výberu definovaných vo formulári HTML. Dokonca aj vy môžete začiarknuť všetky políčka. Vo vyššie uvedenom príklade ste to už videli.