לחצן בחירה הוא סמל המשמש בטפסים כדי לקבל קלט מהמשתמש. זה מאפשר למשתמשים לבחור ערך אחד מקבוצת לחצני הבחירה. לחצני רדיו משמשים בעיקרון עבור בחירה בודדת ממספר בחירה , המשמש בעיקר בצורות GUI.

ניתן לסמן/לסמן רק כפתור בחירה אחד בין שני לחצני בחירה או יותר. בפרק זה, נדריך אותך כיצד לבדוק לחצן בחירה באמצעות שפת תכנות JavaScript .

לשם כך, ראשית אנו מעצבים טופס המכיל רדיו כפתורים באמצעות HTML , ולאחר מכן נשתמש בתכנות JavaScript כדי לבדוק את לחצן הבחירה. נבדוק גם איזה ערך של לחצן הבחירה נבחר.

צור כפתור בחירה

להלן קוד פשוט ליצירת קבוצה של לחצני בחירה.

העתק קוד

מהו שם משתמש

בחר את העונה האהובה עליך:

בדוק כפתור בחירה

אנחנו לא צריכים לכתוב שום קוד ספציפי כדי לבדוק את לחצן הבחירה. ניתן לבדוק אותם ברגע שהם נוצרים או מצוינים בצורת HTML.

עם זאת, עלינו לכתוב את קוד ה-JavaScript כדי לקבל את הערך של כפתור הבחירה המסומן, אותו נראה בפרק שלהלן:

בדוק אם לחצן הבחירה נבחר או לא

ישנן שתי דרכים ב-JavaScript לבדוק את לחצן הבחירה המסומן או לזהות איזה לחצן בחירה נבחר. JavaScript מציעה שתי שיטות DOM לכך.

getElementById querySelector

מאפיין הקלט רדיו מסומן משמש כדי לבדוק אם תיבת הסימון מסומנת או לא. להשתמש document.getElementById('id'). מסומן שיטה לכך. זה יחזיר את המצב המסומן של לחצן הבחירה כערך בוליאני. זה יכול להיות נכון או שקר.

נכון - אם לחצן הבחירה נבחר.

שקר - אם לחצן הבחירה לא נבחר/ מסומן.

עיין בקוד JavaScript למטה כדי לדעת איך זה עובד:

דוגמא

לדוגמה, יש לנו כפתור בחירה בשם קיץ ו-id = 'קיץ'. כעת, נבדוק באמצעות מזהה הכפתור הזה אם כפתור הבחירה מסומן או לא.

העתק קוד

 if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } 

querySelector()

הפונקציה querySelector() היא שיטת DOM של JavaScript. הוא משתמש במאפיין השם הנפוץ של כפתורי הבחירה בתוכו. שיטה זו משמשת כמפורט להלן כדי לבדוק איזה לחצן בחירה נבחר.

 document.querySelector('input[name='JTP']:checked') 

דוגמא

לדוגמה, יש לנו קבוצה של לחצני בחירה עם השם של מאפיין שם = 'עונה' עבור כל הלחצנים. כעת, בין הכפתורים הללו בשם עונה נבדוק איזה מהם נבחר.

העתק קוד

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } 

קבל את הערך של לחצן הבחירה המסומן:

שימוש ב-getElementById ()

להלן הקוד לקבלת הערך של לחצן הבחירה המסומן באמצעות שיטת getElementById():

העתק קוד

 if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } 

שימוש ב-querySelector()

להלן הקוד לקבלת הערך של לחצן הבחירה המסומן באמצעות שיטת querySelector():

העתק קוד

 var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } 

קוד מלא לקבלת ערך לחצן הבחירה שנבחר

בדוגמה זו, נחבר את כל הקוד לעיל כדי ליצור ולבדוק כפתור בחירה. לאחר מכן נביא גם את הערך של כפתור הבחירה שנבחר.

העתק קוד

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById(&apos;summer&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;summer&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;winter&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;winter&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;rainy&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;rainy&apos;).value + &apos; radio button is checked&apos;; } else if(document.getElementById(&apos;autumn&apos;).checked) { document.getElementById(&apos;disp&apos;).innerHTML = document.getElementById(&apos;autumn&apos;).value + &apos; radio button is checked&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;You have not selected any season&apos;; } } 

תְפוּקָה

כאשר תפעיל את הקוד לעיל, הוא ירוץ באינטרנט וייתן את הפלט כמפורט להלן:

רשת numpy

בחר באחד מכפתורי הבחירה ולחץ על שלח כפתור וקבל את הערך שנבחר.

למקרה שלא תבחר באף אחת מהעונות ולחץ ישירות על שלח כפתור, הוא יראה לך הודעת שגיאה ש- לא בחרת אף עונה כי השתמשנו באימות.

קבל את הערך של לחצן הבחירה שנבחר: querySelector()

שיטת DOM querySelector()

הפונקציה querySelector() היא שיטת DOM של JavaScript. שיטה זו משמשת כדי לקבל את האלמנט התואם לצוין בורר CSS במסמך. זכור שעליך לציין את מאפיין השם של לחצן הבחירה בקוד HTML.

הוא משמש כ document.querySelector('input[name='JTP']:checked') בתוך ה לשונית כדי לבדוק את ערך לחצן הבחירה שנבחר מקבוצת לחצני הבחירה. זה ממזער את אורך הקוד על ידי קבלת הערך של לחצן הבחירה שנבחר באמצעות שורת קוד קטנה.

המרת מחרוזת ל-char java

 var selectedValue = document.querySelector('input[name='JTP']:checked') 

ראה את הקוד שלהלן כיצד הוא ישתמש בטופס HTML:

העתק קוד

 <br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( &apos;input[name=&apos;season&apos;]:checked&apos;); if(getSelectedValue != null) { document.getElementById(&apos;disp&apos;).innerHTML = getSelectedValue.value + &apos; season is selected&apos;; } else { document.getElementById(&apos;error&apos;).innerHTML = &apos;*You have not selected any season&apos;; } } 

תְפוּקָה

כאשר תפעיל את הקוד לעיל, הוא יראה לך את הפלט באינטרנט כפי שמוצג להלן. מכאן, בחר את העונה המועדפת עליך.

כאשר אתה בוחר ערך בין כפתור הבחירה הנתון ולחץ על שלח כפתור, תקבל את הערך שנבחר באינטרנט.

למקרה שתלחץ על שלח לחצן מבלי לבחור אף אחד מכפתורי הבחירה, הוא יראה לך הודעת שגיאה ש- לא בחרת אף עונה .

אז, כאן אתה יכול לראות את שניהם getElementById('season').value ו document.querySelector('input[name='JTP']:checked') לעבוד אותו הדבר. שניהם משמשים כדי למצוא את ערך לחצן הבחירה המסומן. אתה יכול להשתמש בכל אחד מהם.

getElementById לעומת querySelector

שתי שיטות ה-DOM getElementByID() ו- querySelector() עובדות כמעט אותו הדבר. עם זאת, יש להם גם מעט הבדלים כמו ביצועים וגודל הקוד וכו'. בואו נראה הבדל ביניהם:

אורך הקוד

הקוד שנכתב עם getElementById הוא קצת יותר ארוך מה-querySelector. באמצעות שיטת getElementById, עלינו לבדוק כל כפתור בנפרד איזה מהם מסומן.

מצד שני, אם אתה משתמש בשיטת querySelector DOM, אתה רק צריך לשים שורת קוד אחת כדי לבדוק את כפתור הבחירה המסומן ולקבל את הערך שלו. לכן, המסקנה היא ש-querySelector דורש פחות קוד.

ביצועים

שתי הפונקציות מספקות ביצועים טובים אבל כל מה שאתה צריך לדעת איזו מהן טובה יותר. ה getElementById השיטה מהירה הרבה יותר מה querySelector שיטה. גם שיטת querySelector קצת מורכבת.

ערך בשימוש בשיטות DOM

שיטת getElementById משתמשת תמיד במזהה ייחודי של כל כפתור בחירה תוך בדיקת הכפתור המסומן ומחזירה את הרכיב הראשון תואם עם המזהה.

ואילו querySelector משתמש במשותף שם (בורר) עבור כל לחצני הבחירה כדי לקבל את לחצן הבחירה המסומן ולהחזיר את הרכיב הראשון שתואם לבורר שצוין.