Zaškrtávací políčko je výběrové políčko, které umožňuje uživatelům provést binární volbu (pravda nebo nepravda) zaškrtnutím a zrušením zaškrtnutí. Zaškrtávací políčko je v podstatě ikona, která se často používá ve formulářích a aplikacích s grafickým rozhraním k získání jednoho nebo více vstupů od uživatele.
- Pokud je zaškrtávací políčko označeno nebo zaškrtnuto, znamená to skutečný ; to znamená, že uživatel vybral hodnotu.
- Není-li zaškrtávací políčko zaškrtnuté nebo není zaškrtnuté, znamená to Nepravdivé ; to znamená, že uživatel nezvolil hodnotu.
Pamatuj si to zaškrtávací políčko se liší od přepínače a rozevíracího seznamu, protože umožňuje více výběrů najednou. Naproti tomu přepínač a rozbalovací nabídka nám umožňují vybrat pouze jednu z daných možností.
V této kapitole se nyní podíváme, jak získat všechny označené hodnoty zaškrtávacího políčka pomocí JavaScript .
Vytvořit syntaxi zaškrtávacího políčka
Chcete-li vytvořit zaškrtávací políčko, použijte záložku HTML a zadejte='checkbox' uvnitř záložky, jak je znázorněno níže -
Yes
Ačkoli můžete také vytvořit zaškrtávací políčko vytvořením objektu zaškrtávacího políčka pomocí JavaScriptu, tato metoda je trochu komplikovaná. Oba přístupy probereme později -
knn algoritmus
Příklady
Vytvořte a získejte hodnotu zaškrtávacího políčka
V tomto příkladu vytvoříme dvě zaškrtávací políčka, ale s podmínkou, že mezi nimi bude muset uživatel označit pouze jedno zaškrtávací políčko. Poté načteme hodnotu označeného checkboxu. Viz kód níže:
Kopírovat 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> Otestujte to hned Výstup
Pokud označíte Ano zaškrtávací políčko a poté klikněte na Předložit tlačítko, zobrazí se zpráva, jak je uvedeno níže:
Pokud kliknete na Předložit bez označení některého z políček, zobrazí se chybová zpráva.
Podobně můžete na výstupu zkontrolovat další podmínky.
Získat hodnotu všech zaškrtávacích políček
Nyní uvidíte, jak získat všechny hodnoty zaškrtávacích polí označených uživatelem. Viz níže uvedený příklad.
Kopírovat 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> Otestujte to hned Výstup
Zde vidíte, že byla vrácena hodnota všech označených zaškrtávacích políček.
Různé kódy JavaScript pro získání označených hodnot zaškrtávacích políček
Kód JavaScript pro získání všech hodnot zaškrtnutých políček
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 také použít níže uvedený kód k získání všech hodnot zaškrtnutých políček.
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škrtávacího políčka tedy umožňují vícenásobný výběr. To znamená, že uživatelé mohou vybrat jednu nebo více možností podle svého výběru definovaných ve formuláři HTML. I vy můžete zaškrtnout všechna zaškrtávací políčka. Ve výše uvedeném příkladu jste to již viděli.
funkce podřetězec java