مربع الاختيار هو مربع اختيار يسمح للمستخدمين بإجراء الاختيار الثنائي (صواب أو خطأ) عن طريق تحديده وإلغاء تحديده. في الأساس، مربع الاختيار هو رمز، والذي يتم استخدامه بشكل متكرر في نماذج واجهة المستخدم الرسومية والتطبيقات للحصول على واحد أو أكثر من المدخلات من المستخدم.
- إذا تم وضع علامة على خانة الاختيار أو تحديدها، فهذا يشير إلى ذلك حقيقي ; هذا يعني أن المستخدم قد حدد القيمة.
- إذا كانت خانة الاختيار غير محددة أو لم يتم تحديدها، فهذا يشير إلى خطأ شنيع ; وهذا يعني أن المستخدم لم يحدد القيمة.
تذكر ذلك يختلف مربع الاختيار عن زر الاختيار والقائمة المنسدلة لأنه يسمح بتحديدات متعددة في وقت واحد. في المقابل، يسمح لنا زر الاختيار والقائمة المنسدلة باختيار خيار واحد فقط من الخيارات المحددة.
في هذا الفصل، سنرى الآن كيفية الحصول على كل قيمة خانة الاختيار المحددة باستخدام جافا سكريبت .
إنشاء بناء جملة مربع الاختيار
لإنشاء مربع اختيار، استخدم علامة تبويب HTML واكتب = 'مربع اختيار' داخل علامة التبويب كما هو موضح أدناه -
نواة ميكروليثيك
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> اختبره الآن انتاج |
إذا قمت بوضع علامة على نعم خانة الاختيار ثم انقر على يُقدِّم الزر، ستظهر رسالة كما هو موضح أدناه:
إذا قمت بالنقر فوق يُقدِّم دون وضع علامة على أي من خانات الاختيار، سيتم عرض رسالة خطأ.
وبالمثل، يمكنك التحقق من الإخراج لشروط أخرى.
dijkstra
الحصول على كل قيمة خانة الاختيار
الآن، سترى كيفية الحصول على جميع قيم خانات الاختيار التي حددها المستخدم. انظر المثال أدناه.
رمز النسخ
<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. حتى يمكنك تحديد كافة خانات الاختيار. في المثال أعلاه، لقد رأيت ذلك بالفعل.