הנך נמצא: מדריך בסיסי / שיעור 5 / דף 7
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: מבוא לשיעור 5
2: מבוא לטפסים
3: מניפולציות בטקסט
4: ארועי שדות הטקסט
5: מנהל טפסים
6: תרגילים בשדה הטקסט
7: CheckBoxes
8: כפתורי רדיו
9: בחירות
10: אלמנט onChange
11: סקירה של שיעור 5
|
|
|
|
|
|
|
|
|
|
|
|

שיעור 5

דף 7: CheckBoxes.

שדות הטקסט ואזורי הטקסט הם רק עוד שתי סוגים של אלמנטים בטופס. עוד נושאים שנדון בהם בשיעור זה הינם ה- checkboxes, כפתורי רדיו ותפריטי בחירה. קודם נדון בבדיקת ה-checkbox. ל-checkbox ישנה תכונה אחת מעניינת במיוחד: האפשרות להיבחר (check).

This checkbox is checked
This checkbox is not checked

אם יש לך טופס שנקרא: the_form וה- checkbox קרוי: the_checkbox, תוכל לראות אם ה-checkbox כבר נבחר ע"י הקוד הבא:

var is_checked = window.document.the_form.the_checkbox.checked;
if (is_checked == true) {
  alert("Yup, it's checked!");
} else {
  alert("Nope, it's not checked.");
}

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

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

ועכשיו לקוד של הדוגמא:

<form name="form_1">
  <input type="checkbox" name="check_1">Checkbox 1<br>
</form>

<a href="#" onClick="window.document.form_1.check_1.checked=true; return false;">Click to check Checkbox 1</a> <br>
<a href="#" onClick="window.document.form_1.check_1.checked=false; return false;">Click to uncheck Checkbox 1</a> <br>
<a href="#" onClick="alert(window.document.form_1.check_1.checked); return false;">Click to see the value of Checkbox 1</a>

שים לב לכך שאני מחזיר false בתוך ה- href, ע"מ למנוע מהדף לקפוץ כאשר אתה לוחץ על הלינקים.

ל- checkbox יש אחראי אירועים מעניין: ה- onClick. כאשר מישהו לוחץ על ה-checkbox האחראי על ה- onClick מופעל. הנה דוגמא:

The Light Switch

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

<form name="form_2">
  <input type="checkbox" name ="check_1" onClick="switchLight();">The Light Switch
</form>

כאשר מישהו לוחץ על ה- checkbox אחראי הארועים של onClick מופעל וגורר הפעלת הפונקציה ()switchLight. הנה פונקציית ()switchLigt:

function switchLight()
{
  var the_box = window.document.form_2.check_1;
  var the_switch = "";
  if (the_box.checked == false) {
    alert("Hey! Turn that back on!");
    document.bgColor='black';
  } else {
    alert("Thanks!");
    document.bgColor='white';
  }
}

הדבר המעניין היחידי מתרחש בשורה הראשונה:

var the_box = window.document.form_2.check_1;

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

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

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר