משחקי checkbox

‏ • 14 בספטמבר, 2002



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

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










בחר הכל

פעולה זו היא די פשוטה. יש לעבור על כל תיבות הסימון בקבוצה, ולשנות את המאפיין 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)">


בהצלחה!

תגיות: , , , ,

גיל

מאמרים נוספים של גיל

עוד בנושא זה

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

תגיות

.net ASP ASP.Net ASP.NET MVC C# CMS CSHTML CSS Database DB DHTML DOM Dynamic HTML HTML5 JavaScript JS PHP Reference SEO SilverLight SQL VBS Visual Studio W3C WAP WebMatrix Windows Phone wml WPF בניית אתרים בסיס נתונים דינמי דרופל הרצאות בוידאו וורדפרס מדריך סלולארי פורום צד לקוח פורום צד שרת פיתוח צד לקוח צד שרת קידום קידום אתרים