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