פונקציית JS שמשנה ערך של כפתור רדיו

avr416

יש לי דף שאפשר לבחור בו ג' סוגי חיפוש. החיפוש הרגיל מסומן כברירת מחדל. אולם, אני רוצה להוסיף יכולת שאם המשתמש בחר בחיפוש שונה, ואח"כ הוא לוחץ עליו שוב (כיון שהוא רוצה לבטל את הסימון) אז הסימון יחזור שוב לרדיו של החיפוש הרגיל.
כתבתי את הקוד הזה:

$(".OptionSearch").click(function () {
        if (this.checked==true) {
            $("#normal-search").prop("checked", true);
        }
        else {
            this.checked = true;
        }
    });

עיין כאן:

הבעיה היא שתמיד הוא מסמן את כפתור הרדיו הראשון. ולמה? כיון שהתנאי
if (this.checked==true) תמיד מתקיים, שהרי המתודה נקרית מיד עם אירוע הלחיצה, ולכן תמיד הוא יהיה מסומן, ותמיד יתבצע המשפט
$("#normal-search").prop("checked", true);
חשבתי לפתור זאת ע"י לכידה של אירוע מעבר העכבר מעל הרדיו הנוכחי, ואז תתבצע הבדיקה האם הוא מסומן או לא, ואם הוא מסומן היא תגדיר שבלחיצה יתבצע הסימון של הכפתור של החיפוש הרגיל, במקום סימון הכפתור הנוכחי.
השאלה היא: כיצד עושים זאת?
תודה רבה!

פורסם במקור בפורום CODE613 ב11/11/2015 22:42 (+02:00)

avr416

אדהכי והכי כתבתי את הקוד הבא:

$(".OptionSearch").hover(function () {
    if (this.checked == true)
    {
        $(this).click(function(){
            $("#normal-search").prop("checked", true);
        })
    }
    else
    {
        $(this).click(function(){
            this.checked = true;
        })
    }       
});

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

החסרון הגדול שצריך לעמוד בדיוק על הכפתור, וא"א לעמוד על התווית. כמו כן, כדי שזה ישתנה לפעם הבאה - צריך להזיז את הלחצן ממנו ואח"כ להחזיר אותו אליו.
כדי לפתור את הבעיה הראשונה ניסיתי לקרוא לlabel בשם של הקלאס, אולם זה לא עובד, כיון שללייבל אין ערך של checked :lol:
אשמח לרעיונות ועזרה!
תודה רבה!
אברהם

פורסם במקור בפורום CODE613 ב11/11/2015 23:07 (+02:00)

רחמים

כמה עובדות
הארוע קליק נורה כאשר לחצן העכבר חוזר למעלה
המאפיין checked משתנה לפני הארוע קליק ואחרי הארוע mousedown

פורסם במקור בפורום CODE613 ב11/11/2015 23:46 (+02:00)

רחמים

ראה את זה https://jsfiddle.net/k6yxL87z/7/
השינוי הראשון זה כמובן להעביר את הקלאס לאינפוט ולא לתוית
והשינוי השני בקוד

var id;
$(".OptionSearch").mousedown(function () {
    if (this.checked) id = this.id;
});
$(".OptionSearch").click(function () {
    if (this.checked && id == this.id) {
        $("#normal-search").prop("checked", true);
        id = "normal-search";
    }
});

פורסם במקור בפורום CODE613 ב12/11/2015 00:02 (+02:00)

avr416

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

פורסם במקור בפורום CODE613 ב12/11/2015 00:13 (+02:00)

רחמים

אפשר בהחלט
ראה כאן https://jsfiddle.net/k6yxL87z/8/
הוספתי עוד קוד כזה:

$(".OptionSearchlabel").mousedown(function () {
     var checkId = this.attributes.for.value;
     if ($("#" + checkId)[0].checked) id = checkId;
 });

פורסם במקור בפורום CODE613 ב12/11/2015 02:05 (+02:00)

אהרן

מה עושה הקוד הזה?

this.attributes.for.value;

פורסם במקור בפורום CODE613 ב12/11/2015 08:35 (+02:00)

רחמים

מחזיר את הערך של האטריבוט FOR של התוית

פורסם במקור בפורום CODE613 ב12/11/2015 08:36 (+02:00)

avr416

תודה רבה רבה רחמים!!
עובד מעולה!!

פורסם במקור בפורום CODE613 ב12/11/2015 09:31 (+02:00)

תחומים - פורום חרדי מקצועי

פונקציית JS שמשנה ערך של כפתור רדיו