Квадратчето за отметка е поле за избор, което позволява на потребителите да направят двоичния избор (вярно или невярно), като поставят и премахват отметка. По принцип квадратчето за отметка е икона, която често се използва във формуляри и приложения с GUI, за да получите един или повече входове от потребителя.
- Ако дадено поле за отметка е маркирано или отметнато, то показва до вярно ; това означава, че потребителят е избрал стойността.
- Ако квадратче за отметка не е маркирано или не е отметнато, то показва до невярно ; това означава, че потребителят не е избрал стойността.
Не забравяйте, че квадратчето за отметка е различно от бутона за избор и падащия списък, тъй като позволява няколко селекции наведнъж. За разлика от това, радиобутонът и падащото меню ни позволяват да изберем само една от дадените опции.
В тази глава сега ще видим как да получите всички маркирани стойности на квадратчета за отметка с помощта на JavaScript .
Създайте синтаксис на квадратчето за отметка
За да създадете квадратче за отметка, използвайте раздела HTML и въведете='checkbox' в раздела, както е показано по-долу -
Yes
Въпреки че можете също да създадете квадратче за отметка, като създадете обекта на квадратчето за отметка чрез JavaScript, но този метод е малко сложен. Ще обсъдим и двата подхода по-късно -
Примери
Създайте и вземете стойност на квадратчето за отметка
В този пример ще създадем две квадратчета за отметка, но с условието, че потребителят ще трябва да маркира само едно квадратче за отметка между тях. След това ще извлечем стойността на маркираното поле за отметка. Вижте кода по-долу:
c++ разделящ низ
Копиране на код
<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> Тествайте сега Изход
Ако маркирате да отметка и след това щракнете върху Изпращане бутон, ще се покаже съобщение, както е показано по-долу:
Ако щракнете върху Изпращане без да маркирате някое от квадратчетата за отметка, ще се покаже съобщение за грешка.
По същия начин можете да проверите изхода за други условия.
Вземете цялата стойност на квадратчето за отметка
Сега ще видите как да получите всички стойности на полето за отметка, маркирани от потребителя. Вижте примера по-долу.
linux make команда
Копиране на код
<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 + ' '); } } Можете също да използвате кода по-долу, за да получите всички стойности на квадратчетата за отметка.
възраст на ритик рошан
document.getElementById('btn').onclick = function() { var markedCheckbox = document.querySelectorAll('input[type='checkbox']:checked'); for (var checkbox of markedCheckbox) { document.body.append(checkbox.value + ' '); } } И така, елементите на полето за отметка позволяват многократен избор. Това означава, че потребителите могат да избират една или повече опции по свой избор, дефинирани в HTML формата. Дори можете да изберете всички квадратчета за отметка. В горния пример вече сте видели това.