וובמאסטר - תיכנות ובניית אתרים

משחקי checkbox

גיל/‏ 14 ספטמבר, 2002
F+
F-

סימון קבוצה שלמה של תיבות סימון

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












בחר הכל


פעולה זו היא די פשוטה. יש לעבור על כל תיבות הסימון בקבוצה, ולשנות את המאפיין checked שלהן ל-true (אם אנחנו רוצים לסמן את כולן) או false (אם אנחנו רוצים לבטל את הסימון).

למטרה זו נבנה פונקציה, כמה שיותר ג'נרית, אשר תקבל את קבוצת תיבות הסימון, וערך בוליאני אליו נשנה את המאפיין checked של כולן.

1
2  

function SelAll(val,grp)


נעבור בלולאה על כל תיבות הסימון בקבוצה (המאפיין length נותן לנו את אורך הקבוצה), ונשנה את המאפיין checked של כל אחת מהן, לערך שקיבלנו:

1
2
3
4  

for(var i=0;i<grp.length;i++)
    grp[i].checked=val



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



בחר הכל


זה לא עובד!
לכן, לפני הלולאה, אנחנו צריכים לבדוק האם הקבוצה מכילה יותר מתיבת סימון אחת:

1
2  

if(grp.length)


כלומר, אם המאפיין length של הקבוצה מכיל משהו, מדובר על תיבות סימון מרובות, ואז נבצע את הלולאה. אם לא, נתייחס לקבוצה (grp) כאל תיבת סימון בודדת, ונשנה את המאפיין checked שלה:

1
2
3  

else
    grp.checked=val


הפונקציה במלואה:

1
2
3
4
5
6
7
8
9
10  
function SelAll(val,grp)
{
    if(grp.length)
    {
        for(var i=0;i<grp.length;i++)
            grp[i].checked=val
    }
    else
        grp.checked=val
}


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

1
2  

<input type="checkbox" name="all" onClick="SelAll(this.checked,this.form.chk)">Select All


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

הפיכת הסימון של קבוצה

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














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

1
2
3
4
5
6
7
8
9
10
11  

function Reverse(grp)
{
    if(grp.length)
    {
        for(var i=0;i<grp.length;i++)
            grp[i].checked=!grp[i].checked
    }
    else
        grp.checked=!grp.checked
}


את הקריאה לפונקציה נעשה הפעם בארוע onClick של כפתור:

1
2  

<input type="button" value="הפוך בחירה" onClick="Reverse(this.form.chk)">


בהצלחה!
תגיות: JS‏  /  form‏  /  checkbox‏  /  סימון‏  /  תיבת סימון‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות