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!

Ogłoszenie

Prosimy o pomoc dla małej Julki — przekaż 1% podatku na Fundacji Dzieciom zdazyć z Pomocą.
Więcej informacji na dug.net.pl/pomagamy/.

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

  Trin - Wredotka

Trin
Wredotka
Zarejestrowany: 2008-05-16

js - checkbox

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.

Offline

 

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

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Poznań, Polska
Zarejestrowany: 2007-12-22
Serwis

Re: js - checkbox

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 tą tabelą, IE <= 8 nie obsługują zdarzenia change na formularzu. IE 8 jest używany przez około 10% wszystkich użytkowników. IE 6 i 7 można już pomijać, łącznie nie mają nawet 1% rynku.

Poza tym zamiast preinkrementacji i predekrementacji używaj zapisu marked+=1 i marked-=1. Raz że jest krótszy, dwa że jest bardziej czytelny.

Offline

 

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

  ponury_kostek - Użytkownik

ponury_kostek
Użytkownik
Skąd: Wałbrzych
Zarejestrowany: 2007-01-02
Serwis

Re: js - checkbox

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)

Offline

 

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

  kamikaze - Administrator

kamikaze
Administrator
Zarejestrowany: 2004-04-16

Re: js - checkbox

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

 

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

  Trin - Wredotka

Trin
Wredotka
Zarejestrowany: 2008-05-16

Re: js - checkbox

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

 

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

  Minio - Użyszkodnik

Minio
Użyszkodnik
Skąd: Poznań, Polska
Zarejestrowany: 2007-12-22
Serwis

Re: js - checkbox

Trin napisał(-a):

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.

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

 

Stopka forum

Powered by PunBB
© Copyright 2002–2005 Rickard Andersson
To nie jest tylko forum, to nasza mała ojczyzna ;-)