Forum Debian Users Gang

Trin · 2013-04-27 23:11:19

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.

Kod:

   <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.

Minio · 2013-04-28 11:17:37

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.

ponury_kostek · 2013-04-28 11:30:40

Kod:

<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)

kamikaze · 2013-04-28 19:44:40

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.

Trin · 2013-04-28 21:55:21

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.

Minio · 2013-04-28 22:14:03

[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.

Time (s)	Query
0.00016	SET CHARSET latin2
0.00005	SET NAMES latin2
0.00170	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.145.59.165' WHERE u.id=1
0.00113	UPDATE punbb_online SET logged=1716062506 WHERE ident='3.145.59.165'
0.00083	SELECT * FROM punbb_online WHERE logged<1716062206
0.00103	DELETE FROM punbb_online WHERE ident='47.128.47.27'
0.00088	DELETE FROM punbb_online WHERE ident='85.208.96.209'
0.00106	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.00007	SELECT search_for, replace_with FROM punbb_censoring
0.00304	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.00124	UPDATE punbb_topics SET num_views=num_views+1 WHERE id=23415
Total query time: 0.01119 s

Forum Debian Users Gang

Ogłoszenie

#1 2013-04-27 23:11:19

Trin - Wredotka

js - checkbox

Kod:

#2 2013-04-28 11:17:37

Minio - Użyszkodnik

Re: js - checkbox

#3 2013-04-28 11:30:40

ponury_kostek - Użytkownik

Re: js - checkbox

Kod:

#4 2013-04-28 19:44:40

kamikaze - Administrator

Re: js - checkbox

#5 2013-04-28 21:55:21

Trin - Wredotka

Re: js - checkbox

#6 2013-04-28 22:14:03

Minio - Użyszkodnik

Re: js - checkbox

Stopka forum

Informacje debugowania