תיבת סימון היא תיבת בחירה המאפשרת למשתמשים לבצע את הבחירה הבינארית (נכונה או לא נכונה) על ידי סימון וביטול הסימון שלה. בעיקרון, תיבת סימון היא סמל, המשמש לעתים קרובות בטפסי GUI ובאפליקציות כדי לקבל קלט אחד או יותר מהמשתמש.
- אם תיבת סימון מסומנת או מסומנת, היא מציינת ל נָכוֹן ; זה אומר שהמשתמש בחר את הערך.
- אם תיבת סימון לא מסומנת או לא מסומנת, היא מציינת שֶׁקֶר ; זה אומר שהמשתמש לא בחר את הערך.
זכור את זה תיבת הסימון שונה מכפתור הבחירה והרשימה הנפתחת מכיוון שהיא מאפשרת בחירות מרובות בו-זמנית. לעומת זאת, כפתור הבחירה והתפריט הנפתח מאפשרים לנו לבחור רק אחת מהאפשרויות הנתונות.
בפרק זה, כעת נראה כיצד לקבל את כל ערכי תיבת הסימון המסומנים באמצעות 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> בדוק את זה עכשיו תְפוּקָה
גנריות ב-java
אם תסמן את ה כן תיבת הסימון ולאחר מכן לחץ על שלח לחצן, תוצג הודעה כפי שמוצג להלן:
אם תלחץ על שלח לחצן מבלי לסמן אף אחת מתיבות הסימון, תוצג הודעת שגיאה.
באופן דומה, אתה יכול לבדוק את הפלט עבור תנאים אחרים.
קבל את כל ערך תיבת הסימון
כעת, תראה כיצד לקבל את כל ערכי תיבת הסימון המסומנים על ידי המשתמש. ראה את הדוגמה למטה.
העתק קוד
<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. אפילו אתה יכול לסמן את כל תיבות הסימון. בדוגמה לעיל, כבר ראית את זה.
פיתון חיפוש בינארי