Pole wyboru to pole wyboru, które pozwala użytkownikom dokonać wyboru binarnego (prawda lub fałsz), zaznaczając go i odznaczając. Zasadniczo pole wyboru to ikona często używana w formularzach GUI i aplikacjach w celu uzyskania jednego lub więcej danych wejściowych od użytkownika.
- Jeśli pole wyboru jest zaznaczone lub zaznaczone, oznacza to PRAWDA ; oznacza to, że użytkownik wybrał wartość.
- Jeśli pole wyboru nie jest zaznaczone lub nie jest zaznaczone, oznacza to FAŁSZ ; oznacza to, że użytkownik nie wybrał danej wartości.
Zapamietaj to pole wyboru różni się od przycisku opcji i listy rozwijanej, ponieważ umożliwia wielokrotny wybór jednocześnie. Natomiast przycisk opcji i rozwijane menu pozwalają nam wybrać tylko jedną z podanych opcji.
W tym rozdziale zobaczymy teraz, jak uzyskać wszystkie zaznaczone wartości pól wyboru za pomocą JavaScript .
Utwórz składnię pola wyboru
Aby utworzyć pole wyboru, użyj karty HTML i wpisz ='checkbox' wewnątrz karty, jak pokazano poniżej -
Yes
Chociaż możesz także utworzyć pole wyboru, tworząc obiekt pola wyboru za pomocą JavaScript, ale ta metoda jest nieco skomplikowana. Obydwa podejścia omówimy później-
Przykłady
Utwórz i uzyskaj wartość pola wyboru
W tym przykładzie utworzymy dwa pola wyboru, ale pod warunkiem, że użytkownik będzie musiał zaznaczyć pomiędzy nimi tylko jedno pole wyboru. Następnie pobierzemy wartość zaznaczonego checkboxa. Zobacz poniższy kod:
Skopiuj 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> Przetestuj teraz Wyjście
Jeśli zaznaczysz Tak pole wyboru, a następnie kliknij przycisk Składać przycisku, wyświetli się komunikat jak pokazano poniżej:
Jeśli klikniesz na Składać bez zaznaczenia któregokolwiek pola wyboru, wyświetli się komunikat o błędzie.
Podobnie możesz sprawdzić dane wyjściowe pod kątem innych warunków.
Pobierz całą wartość pola wyboru
Teraz zobaczysz, jak uzyskać wszystkie wartości pól wyboru zaznaczone przez użytkownika. Zobacz poniższy przykład.
Skopiuj 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> Przetestuj teraz Wyjście
Tutaj możesz zobaczyć, że wartość wszystkich zaznaczonych pól wyboru została zwrócona.
Różne kody JavaScript, aby uzyskać zaznaczoną wartość pól wyboru
Kod JavaScript, aby uzyskać wszystkie zaznaczone wartości pól wyboru
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Możesz także użyć poniższego kodu, aby uzyskać wartości wszystkich zaznaczonych pól wyboru.
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Zatem elementy pola wyboru umożliwiają wielokrotny wybór. Oznacza to, że użytkownik może wybrać jedną lub więcej opcji zdefiniowanych w formularzu HTML. Nawet Ty możesz zaznaczyć wszystkie pola wyboru. W powyższym przykładzie już to widziałeś.
program c dla tablicy dwuwymiarowej