Nie jesteś zalogowany.
Jeśli nie posiadasz konta, zarejestruj je już teraz! Pozwoli Ci ono w pełni korzystać z naszego serwisu. Spamerom dziękujemy!
Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.
Witajcie.
wgryzam się w js drugi dzień i mam taki problemik. Mam sobie formularz składający się z 5 checkboxów. Przy każdym z nich jest przeładowywany png - niby taka kontrolka, która sygnalizuje czy formularz jest poprawnie wypełniony.
Z pośród 5 opcji można wybrać max 3 - pierwsze 3 zaznaczone opcje będą miały "lampkę" (czytaj: png) zieloną. Jeśli się zapędzę i zaznaczę 4 lub 5 odpowiedzi, to czwarta i piąta zaznaczona przeze mnie opcja ma kontrolkę czerwoną.
Chciałabym, że jeśli już zaznaczę te 4 opcje i mam przy checkboxach trzy zielone światełka i jedno czerwone przy zaznaczeniu nadmiarowym, to jeśli odznaczę sobie którykolwiek checkbox (nawet taki oznaczony zielonym światełkiem), to skrypt przeładowuje wszystkie obrazki i przy wszystkich pozostałych trzech opcjach ustawia zielone lampki.
Nie muszę przecież odznaczać tego chb który jest oznaczony na czerwono (tylko dlatego że został zaznaczony jako czwarty czy tam piąty) - mogę sobie odznaczyć ten, ktory zaznaczyłam jako pierwszy a wtedy ilość maksymalnych zaznaczeń się zgadza i wszystkie pozostałe chbxy mają mieć zielone lampki (nawet te, które pierwotnie były czerwone).
Rozumiecie mnie? Mam nadzieję, że za bardzo nie pomotałam.
Wrzucę kod, chociaż jest cholernie banalny i jak ktoś zna js to zrozumie i bez kodu.
<script type="text/javascript"> var marked=0; function change(item){ if((document.getElementById(item).checked) && marked <= 3){ document.getElementById('i_'+item).src='zielone.PNG'; marked=++marked; } if(document.getElementById(item).checked==false){ document.getElementById('i_'+item).src='biale.PNG'; marked=--marked; } if((document.getElementById(item).checked) && marked > 3){ document.getElementById('i_'+item).src='czerwone.PNG'; marked=++marked; } }
Pozdrawiam.
Offline
Napisz sobie funkcję, która iteruje po wszystkich checkboksach i pierwszym trzem zaznaczonym nadaje zielone światełko, a kolejnym czerwone (z grubsza to co już masz, tylko wewnątrz pętli).
Teraz funkcję tę podepnij pod zdarzenie change formularza. Możesz w swojej funkcji najpierw sprawdzać, czy zmieniony został checkbox, aby nie podmieniać bez sensu obrazków gdy ktoś wpisze tekst w innym polu.
Zgodnie z [url=http://www.quirksmode.org/dom/events/change.html]tą tabelą[/url], IE <= 8 nie obsługują zdarzenia change na formularzu. IE 8 jest używany przez około [url=http://gs.statcounter.com]10% wszystkich użytkowników[/url]. IE 6 i 7 można już pomijać, łącznie nie mają nawet 1% rynku.
Poza tym zamiast preinkrementacji i predekrementacji używaj zapisu [tt]marked+=1[/tt] i [tt]marked-=1[/tt]. Raz że jest krótszy, dwa że jest bardziej czytelny.
Offline
<form id="form"> <span></span><input type="checkbox"><br> <span></span><input type="checkbox"><br> <span></span><input type="checkbox"><br> <span></span><input type="checkbox"><br> <span></span><input type="checkbox"><br> </form> <script type="text/javascript"> var cbs = document.querySelectorAll('#form input[type="checkbox"]'), checked = []; function change(e) { if(e.target.checked) { checked.push(e.target); } else { var i; i = checked.indexOf(e.target); if(i >= 0) { checked.splice(i,1); e.target.previousSibling.textContent = ''; } } var c = 0; checked.forEach(function(el) { if(c >= 3) { el.previousSibling.textContent = ':('; } else { el.previousSibling.textContent = ':)'; } c++; }); } for(var i = 0; i < cbs.length; i++) { if (cbs[i].addEventListener) { cbs[i].addEventListener('change', change, false); } else if (el.attachEvent) { cbs[i].attachEvent('change', change); } } </script>
Ostatnio edytowany przez ponury_kostek (2013-04-28 11:31:07)
Offline
Jeśli to ma być walidacja to bardzo pokrętna ;] Od siebie zaproponuje użycie JQuery, bardzo ułatwia życie.Np. zliczenie liczby zaznaczonych checkboxów to tylko tyle:
var numberOfChecked = $('input:checkbox:checked').length;
Czy konkretny zaznaczony:
var checked =$('#checkbox-id').is(':checked');
Wiele przykładów w sieci i dobra dkumentacja. Polecam.
Offline
Ook :) Przyznam że początki są wyboistą drogą, ale mam już jakieś wskazówki i o to właśnie o nie mi chodziło, bo czasem miewam jakieś luki w rozumowaniu i nie bardzo wiem jak obejść problem :) Za gotowy kod dziękuję - ale z niego nie skorzystam, chcę się nauczyć.
Kamikaze, chciałam się oprzeć na czystym Js ale skoro tak mi sugerujesz bo pójdę po rozum do głowy i od razu ugryzę jQuery :)Będę ciągnąć dwie sroki za ogon.
dam znać jak mi poszło :] pozdrawiam.
Offline
[quote=Trin]Kamikaze, chciałam się oprzeć na czystym Js ale skoro tak mi sugerujesz bo pójdę po rozum do głowy i od razu ugryzę jQuery :)Będę ciągnąć dwie sroki za ogon.[/quote]
Osobiście nie polecam. Lepiej najpierw nauczyć się (przynajmniej z grubsza) „czystego” JS a dopiero potem zainteresować się bibliotekami i frameworkami.
Po pierwsze, w bardzo wielu przypadkach biblioteka jest strzelaniem z armaty do wróbla. Po co Ci ≈100 kB kodu, jeżeli chcesz tylko policzyć liczbę zaznaczonych checkboksów?
Po drugie, istnieje przynajmniej kilka wartych uwagi bibliotek JS (jQuery, MooTools, Dojo Toolkit, Prototype). Jeżeli nauczysz się „czystego” JS, to z grubsza będziesz w stanie posługiwać się wszystkimi z nich (po przeczytaniu dokumentacji). Jeżeli nauczysz się jQuery, to będziesz musiała się uczyć pozostałych.
Offline
Time (s) | Query |
---|---|
0.00017 | SET CHARSET latin2 |
0.00004 | SET NAMES latin2 |
0.00171 | SELECT u.*, g.*, o.logged FROM punbb_users AS u INNER JOIN punbb_groups AS g ON u.group_id=g.g_id LEFT JOIN punbb_online AS o ON o.ident='3.128.199.130' WHERE u.id=1 |
0.00079 | UPDATE punbb_online SET logged=1716089155 WHERE ident='3.128.199.130' |
0.00058 | SELECT * FROM punbb_online WHERE logged<1716088855 |
0.00076 | DELETE FROM punbb_online WHERE ident='185.191.171.19' |
0.00082 | SELECT topic_id FROM punbb_posts WHERE id=231230 |
0.00139 | SELECT id FROM punbb_posts WHERE topic_id=23415 ORDER BY posted |
0.00063 | SELECT t.subject, t.closed, t.num_replies, t.sticky, f.id AS forum_id, f.forum_name, f.moderators, fp.post_replies, 0 FROM punbb_topics AS t INNER JOIN punbb_forums AS f ON f.id=t.forum_id LEFT JOIN punbb_forum_perms AS fp ON (fp.forum_id=f.id AND fp.group_id=3) WHERE (fp.read_forum IS NULL OR fp.read_forum=1) AND t.id=23415 AND t.moved_to IS NULL |
0.00014 | SELECT search_for, replace_with FROM punbb_censoring |
0.00099 | SELECT u.email, u.title, u.url, u.location, u.use_avatar, u.signature, u.email_setting, u.num_posts, u.registered, u.admin_note, p.id, p.poster AS username, p.poster_id, p.poster_ip, p.poster_email, p.message, p.hide_smilies, p.posted, p.edited, p.edited_by, g.g_id, g.g_user_title, o.user_id AS is_online FROM punbb_posts AS p INNER JOIN punbb_users AS u ON u.id=p.poster_id INNER JOIN punbb_groups AS g ON g.g_id=u.group_id LEFT JOIN punbb_online AS o ON (o.user_id=u.id AND o.user_id!=1 AND o.idle=0) WHERE p.topic_id=23415 ORDER BY p.id LIMIT 0,25 |
0.00098 | UPDATE punbb_topics SET num_views=num_views+1 WHERE id=23415 |
Total query time: 0.009 s |