שיעור 5
דף 8: כפתורי רדיו.
למזלנו, כפתורי הרדיו כמעט זהים ל- checkbox מנקודת המבט של JavaScript. ההבדל האמיתי היחידי הוא בקוד ה- HTML. ה- checkboxes דומים למכשירים המאפשרים לכבות ולהדליק אותם. אם ה- checkbox נבדק באפשרותך לבטל את הבדיקה ולהפך. כפתורי הרדיו שונים מזה. ברגע שכפתור רדיו נדלק הוא נשאר דלוק עד שכפתור אחר נבחר, ואז הכפתור הראשון כבה. דוגמא לכפתור טיפוסי.
כפי שאתה רואה, אתה יכול לוותר על בחירת כפתור מסויים, רק ברגע שאתה בוחר בכפתור חדש. אחרי שעברנו על כל זאת, אנו יכולים לשחזר את דוגמאות מתג האורות עם כפתורי הרדיו במקום checkbox אחד:
כצפוי, הדוגמא הנ"ל דומה מאוד לדוגמת עם ה- checkboxes. הנה קוד הטופס:
<form name="form_1">
<input type="radio" name ="radio_1" onClick="offButton();">Light off
<input type="radio" name ="radio_2" onClick="onButton();" checked>Light on
</form>
כאשר כפתור הרדיו הראשון נלחץ פונקציית offButton() נקראת לפעולה. קוד הפונקציה:
function offButton()
{
var the_box = window.document.form_1.radio_1;
if (the_box.checked == true) {
window.document.form_1.radio_2.checked = false;
document.bgColor='black';
alert("Hey! Turn that back on!");
}
}
דומה מאוד לדוגמא של ה- checkbox קודם, ההבדל היחידי הוא בשורה הזו:
window.document.form_1.radio_2.checked = false;
קוד זה אומר ל- JavaScript לכבות את הכפתורים האחרים כאשר כפתור זה נדלק. הפונקציה שמופעלת כאשר הכפתור השני בדוגמא נלחץ, דומה מאוד לפונקציה הקודמת:
function onButton()
{
var the_box = window.document.form_1.radio_2;
if (the_box.checked == true) {
window.document.form_1.radio_1.checked = false;
document.bgColor='white';
alert("Thanks!");
}
}
ישנם עוד כמה פרטים אודות checkboxes וכפתורי הרדיו, אבל הם יחכו לשיעור הבא. הבה, נסתכל בסוג האחרון של אלמנטי הטופס: בחירות.
חזור לתחילת הדף
לדף הבא «--
|
