Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: zliczanie elementów tablicy checkboksów
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Marr
6.01.2009, 10:30:10
Witam, mam problem. Chciałbym, żeby ktoś z Was podpowiedział mi jak mógłbym sobie napisać funkcję która zliczy mi zaznaczone checkboxy w tablicy. Checkboxy dodaję sobie dynamicznie. Oto funkcja dodająca checkboxy :
Kod
function dodaj_element(kontener){
    //    var szkolenia = new Object();
    //    for (var i=0; i<<?php echo $licznik;?>; i++ ){
    //    szkolenia[i] = "<input type='checkbox' name='szkolenie"+i+"[]' value='zaznaczony' />";            
    //    }
        var znacznik = document.createElement("input");
        znacznik.setAttribute("type", "text");
        znacznik.setAttribute("name", "uczestnicy[" + (index-1) + "]");
        znacznik.setAttribute("style","margin-top:5px");
        znacznik.className = "uczestnik";
        var znacznik2 = document.createElement("input");
        znacznik2.setAttribute("type", "text");
        znacznik2.setAttribute("name", "stanowiska[]");
        znacznik2.setAttribute("style","margin-top:5px");
        znacznik2.className = "stanowisko";
        var znacznik3 = document.createElement("input");
        znacznik3.setAttribute("type", "text");
        znacznik3.setAttribute("name", "stanowiska[]");
        znacznik3.setAttribute("style","margin-top:5px");
        znacznik3.className = "stanowisko";
        var odstep = document.createElement("div");
        odstep.setAttribute("style","clear:both");
        var etykieta = document.createElement("div");
        etykieta.setAttribute("style", "float: left; margin-left:20px; margin-right:10px; margin-top:5px;");
        etykieta.innerHTML= index + ". Imie i nazwisko: ";
        var etykieta2 = document.createElement("div");
        etykieta2.setAttribute("style", "float: left; margin-left:20px; margin-right:10px; margin-top:5px;");
        etykieta2.innerHTML="Stanowisko: ";
        var etykieta3 = document.createElement("div");
        etykieta3.setAttribute("style", " float: left; margin-left:20px; margin-right:10px; margin-top:5px;");
        etykieta3.innerHTML="Zapisz na szkolenia: ";
        var proba = document.createElement("span");
        proba.setAttribute("style","float:left; margin-top:5px")
        for (var j=0; j<<?php echo $licznik;?>; j++){
        proba.innerHTML+="&nbsp;&nbsp;&nbsp;"+(j+1)+". <input type='checkbox' name='szkolenie"+j+"[]' value="+(index-1)+" onClick='licz()' checked='checked' />";
        }
        
    
        
        var kontener = document.getElementById(kontener);
        kontener.appendChild(odstep);
        kontener.appendChild(etykieta);
        kontener.appendChild(znacznik);
        kontener.appendChild(etykieta2);
        kontener.appendChild(znacznik2);
        kontener.appendChild(etykieta3);
        kontener.appendChild(proba);
    
        index++;
        id++;
        }


i teraz chciałbym policzyć wszystkie zaznaczone checkboxy w tablicy szkolenie"+j+"[] - da się w ogóle coś takiego zrobić? nie mam pomysłu. Proszę o pomoc.
vokiel
6.01.2009, 12:09:47
Proponowałbym zainteresować się biblioteką jquery.
Samo zliczenie zaznaczonych checkboxów możesz zrobić mniej więcej tak:
[HTML] pobierz, plaintext 
  1. <a href="#" id="sprawdz" >sprawdz</a>
  2. <div id="kontener">tutaj Twoje checkboxy</div>
  3. <div id="ilosc"></div>
  4. <script type="text/javascript">
  5. // wywolanie funkcji (np po kliknieciu w przycisk)
  6. $(document).ready(function(){
  7. 	$("#sprawdz").click(
  8. 		var checked_box=0;
  9. 		$("#kontener").find("input[@type$='checkbox']").each(function(){if(this.checked)checked_box++;});
  10. 		$("#ilosc").html('zaznaczonych:' + checked_box);
  11. 	});
  12. });
  13. </script>
[HTML] pobierz, plaintext
Marr
6.01.2009, 12:48:34
przyznam, że jQuery jeszcze mnie troche przeraża. W zasadzie zaczynam dopiero z js i stad to wszystko. Zaraz poeksperymentuje z Twoja propozycja, za która bardzo dziekuje. Jakby ktoś jeszcze miał jakieś inne rozwiązanie to też poprosze.

EDIT: Aha jeszcze mnie zastanawia jedna sprawa. Czy jezeli zapisuje sobie checkboxy do tablicy to czy nie mógłbym skorzystać z .length zeby zliczyć elementy tej tablicy? Próbuję ale nie bardzo chce działać. całość mojego "skryptu" wyglada tak :

Kod
<script type="text/javascript">

         <!--
         var index = 2;
         var id = 0;
        
         function dodaj_element(kontener){
     //    var szkolenia = new Object();
     //    for (var i=0; i<<?php echo $licznik;?>; i++ ){
     //    szkolenia[i] = "<input type='checkbox' name='szkolenie"+i+"[]' value='zaznaczony' />";            
     //    }
         var znacznik = document.createElement("input");
         znacznik.setAttribute("type", "text");
         znacznik.setAttribute("name", "uczestnicy[" + (index-1) + "]");
         znacznik.setAttribute("style","margin-top:5px");
         znacznik.className = "uczestnik";
         var znacznik2 = document.createElement("input");
         znacznik2.setAttribute("type", "text");
         znacznik2.setAttribute("name", "stanowiska[]");
         znacznik2.setAttribute("style","margin-top:5px");
         znacznik2.className = "stanowisko";
         var znacznik3 = document.createElement("input");
         znacznik3.setAttribute("type", "text");
         znacznik3.setAttribute("name", "stanowiska[]");
         znacznik3.setAttribute("style","margin-top:5px");
         znacznik3.className = "stanowisko";
         var odstep = document.createElement("div");
         odstep.setAttribute("style","clear:both");
         var etykieta = document.createElement("div");
         etykieta.setAttribute("style", "float: left; margin-left:20px; margin-right:10px; margin-top:5px;");
         etykieta.innerHTML= index + ". Imie i nazwisko: ";
         var etykieta2 = document.createElement("div");
         etykieta2.setAttribute("style", "float: left; margin-left:20px; margin-right:10px; margin-top:5px;");
         etykieta2.innerHTML="Stanowisko: ";
         var etykieta3 = document.createElement("div");
         etykieta3.setAttribute("style", " float: left; margin-left:20px; margin-right:10px; margin-top:5px;");
         etykieta3.innerHTML="Zapisz na szkolenia: ";
         var proba = document.createElement("span");
         proba.setAttribute("style","float:left; margin-top:5px")
         for (var j=0; j<<?php echo $licznik;?>; j++){
         proba.innerHTML+="&nbsp;&nbsp;&nbsp;"+(j+1)+". <input type='checkbox' name='szkolenie"+j+"[]' value="+(index-1)+" onClick='licz()' checked='checked' />";
         }
        
    
        
         var kontener = document.getElementById(kontener);
         kontener.appendChild(odstep);
         kontener.appendChild(etykieta);
         kontener.appendChild(znacznik);
         kontener.appendChild(etykieta2);
         kontener.appendChild(znacznik2);
         kontener.appendChild(etykieta3);
         kontener.appendChild(proba);
    
         index++;
         id++;
         }
        
         var suma=0;  
         function licz() {
         var cashHolder = document.getElementById("cash");
         for (var j=0; j<<?php echo $licznik;?>; j++){
             for (var i=0; i<index; i++){
             var licznik = document.getElementsByName("szkolenie"+j+"["+i+"]");
         suma+=licznik;
             }
         }
         cashHolder.innerHTML=suma;
        
}
         //-->
        
        
     </script>


ma to w ogóle jakiś sens?


edit2: sama funkcja zliczająca moje tablice checkboksów wygląda teraz tak, narazie nie korzystam z Twojego rozwiązania Vokiel, bo nie ukrywam, ze moje jest bardziej w moim toku myślenia, Twojego nie do konca rozumiem. Możecie mi powiedzieć dlaczego taka funkcja nie zlicza poprawnie? daje mi ciągle 0. ;/

Kod
    function licz() {
        var licznik =0;
        var cashHolder = document.getElementById("cash");
        for (var j=0; j<<?php echo $licznik;?>; j++){
            for (var i=0; i<index; i++){
                var stan = document.getElementsByName("szkolenie"+j+"["+i+"]").checked;
                if (stan == true) {
                licznik++;
        suma+=licznik;}
        }
        cashHolder.innerHTML=suma;
        }
}
vokiel
7.01.2009, 10:04:08
Zobacz tak:
[HTML] pobierz, plaintext 
  1. function licz() {
  2.         var licznik =0;
  3.         var cashHolder = document.getElementById("cash");
  4.         for (var j=0; j<<?php echo $licznik;?>; j++){
  5.             for (var i=0; i<index; i++){
  6.                 var stan = document.getElementsByName("szkolenie"+j+"["+i+"]").checked;
  7.                 if (stan == true) {
  8.                         licznik++;
  9.                 }
  10.                 suma+=licznik;
  11.             }
  12.         }
  13.         cashHolder.innerHTML=suma;
  14. }
[HTML] pobierz, plaintext

Sprawdzaj poprzez alert san licznikow, bo moze się nie zwiększyły.
Marr
13.01.2009, 10:32:59
kurcze nadal coś mi nie działa ;/ wydaje mi się ze problem dotyczy 
[HTML] pobierz, plaintext 
  1. var stan = document.getElementsByName("szkolenie"+j+"["+i+"]").checked;
[HTML] pobierz, plaintext


ponieważ jak za kazdym wywolaniem funkcji wyswietlam sobie alertem zmienna stan to zawsze jest undefinied - jakies pomysly?
vokiel
16.01.2009, 15:34:30
Skoro literujemy przez tablicę, to trzeba po id. Tylko uprzednio trzeba tą właściwośc ustawic przy generowaniu formularza
[HTML] pobierz, plaintext 
  1. var stan = document.getElementById("szkolenie"+j+"["+i+"]").checked;
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.