Прапорець — це вікно вибору, яке дозволяє користувачам робити двійковий вибір (істина чи хибність), установлюючи та знімаючи позначку. По суті, прапорець — це піктограма, яка часто використовується у формах графічного інтерфейсу користувача та програмі для отримання одного або кількох введених даних від користувача.
- Якщо прапорець позначено або встановлено, це вказує на правда ; це означає, що користувач вибрав значення.
- Якщо прапорець не позначено або не позначено, це вказує на помилковий ; це означає, що користувач не вибрав значення.
Пам'ятайте, що прапорець відрізняється від перемикача та розкривного списку, оскільки він дозволяє одночасно вибирати кілька пунктів. Навпаки, перемикач і спадне меню дозволяють нам вибрати лише один із запропонованих варіантів.
У цьому розділі ми побачимо, як отримати всі позначені значення прапорців за допомогою JavaScript .
Створення синтаксису прапорця
Щоб створити прапорець, використовуйте вкладку HTML і введіть='checkbox' усередині вкладки, як показано нижче -
Yes
Хоча ви також можете створити прапорець, створивши об’єкт прапорця за допомогою JavaScript, але цей метод є дещо складнішим. Ми обговоримо обидва підходи пізніше -
Приклади
Створення та отримання значення прапорця
У цьому прикладі ми створимо два прапорці, але з умовою, що користувач повинен буде встановити лише один прапорець між ними. Потім ми отримаємо значення позначеного прапорця. Перегляньте код нижче:
вибрати як
Копіювати код
<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> Перевірте зараз Вихід
Якщо ви позначите Так прапорець, а потім натисніть на Надіслати кнопку, з’явиться повідомлення, як показано нижче:
Якщо натиснути на Надіслати без встановлення прапорців, буде показано повідомлення про помилку.
Так само ви можете перевірити вихід для інших умов.
Отримати всі значення прапорців
Тепер ви побачите, як отримати всі значення прапорців, позначені користувачем. Дивіться приклад нижче.
перетворення рядка в об'єкт json
Копіювати код
<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> Перевірте зараз Вихід
Тут ви бачите, що значення всіх позначених прапорців повернуто.
Різні коди JavaScript, щоб отримати позначені значення прапорців
Код JavaScript для отримання всіх позначених прапорцями значень
document.getElementById('btn').onclick = function() { var markedCheckbox = document.getElementsByName('pl'); for (var checkbox of markedCheckbox) { if (checkbox.checked) document.body.append(checkbox.value + ' '); } } Ви також можете використати наведений нижче код, щоб отримати всі значення прапорців.
java case оператор
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } Таким чином, елементи прапорця дозволяють здійснювати багаторазовий вибір. Це означає, що користувачі можуть вибрати один або кілька параметрів на свій вибір, визначених у формі HTML. Навіть ви можете встановити всі прапорці. У наведеному вище прикладі ви це вже бачили.