Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Sześć checkboxów - lecz tylko trzy mogą być naraz
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
L_Devil
26.01.2006, 10:45:44
Witam!

Wykombinowałem sobie coś takiego do rozwiązania problemu z tematu:
Chodzi mi o skrypt który nie pozwoli userowi wybrać więcej niż trzech checkboxów na raz, blokując pozostałe nie zaznaczone.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
  2. <html>
  3. <head>
  4. <script language="javascript">
  5. selected=0;
  6. function swap(oForm, checkbox)
  7. {
  8.         if(oForm.name0.checked && checkbox==0) selected = selected+1;
  9.    else if(oForm.name1.checked && checkbox==1) selected = selected+1;
  10.    else if(oForm.name2.checked && checkbox==2) selected = selected+1;
  11.    else if(oForm.name3.checked && checkbox==3) selected = selected+1;
  12.    else if(oForm.name4.checked && checkbox==4) selected = selected+1;
  13.    else if(oForm.name5.checked && checkbox==5) selected = selected+1;
  14.    else                                        selected = selected-1;
  15.    if(selected==3)
  16.    {
  17.        for (i=0;i<6;i++)
  18.        {
  19.            if(!oForm.elements[i].checked) oForm.elements[i].disabled=true;
  20.        };
  21.    }
  22.    else
  23.    {
  24.        for (i=0;i<6;i++) oForm.elements[i].disabled=false;
  25.    }
  26. }
  27. </script>
  28. </head>
  29. <body>
  30. <h3>Wybór checkboxów</h3><form method="post" name="myform" action="http://localhost/submit.php">
  31. <input type="checkbox" name="all[]" value="one" id="one" onClick="swap(this.form, 0)"><label for="one">Jeden</label><br />
  32. <input type="checkbox" name="all[]" value="two" id="two" onClick="swap(this.form, 1)"><label for="two">Dwa</label><br />
  33. <input type="checkbox" name="all[]" value="three" id="three" onClick="swap(this.form, 2)"><label for="three">Trzy</label><br />
  34. <input type="checkbox" name="all[]" value="four" id="four" onClick="swap(this.form, 3)"><label for="four">Cztery</label><br />
  35. <input type="checkbox" name="all[]" value="five" id="five" onClick="swap(this.form, 4)"><label for="five">Pięć</label><br />
  36. <input type="checkbox" name="all[]" value="six" id="spells" onClick="swap(this.form, 5)"><label for="six">Sześć</label><br />
  37. <br /><button type="submit">Zapisz</button></form><br />
  38. </body>
  39. </html>
[HTML] pobierz, plaintext
Tylk oże to nie ma zamiaru działać. Po prostu nic się nie dzieje, nawet po zaznaczeniu wszystkich sześciu. Gdzie popełniłem błąd?
nospor
26.01.2006, 12:20:24
Dokonalem "lekkich" modyfikacji:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
  2. <html>
  3. <head>
  4. <script language="javascript">
  5.  
  6. function swap()
  7. {
  8. 	selected=0;
  9. 	chList = document.getElementsByName("all[]");
  10. 	for (i=0; i < chList.length;i++){
  11. 		ch = chList[i];
  12. 		if (ch.checked) 
  13. 			selected ++;
  14. 	}
  15.  
  16. 	dis  = (selected >= 3);
  17. 	for (i=0; i < chList.length;i++){
  18. 		ch = chList[i];
  19. 		if (!ch.checked) 
  20. 			ch.disabled = dis;
  21. 	}
  22.  
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <h3>Wybór checkboxów</h3><form method="post" name="myform" action="http://localhost/submit.php">
  28. <input type="checkbox" name="all[]" value="one" id="one" onClick="swap()"><label for="one">Jeden</label><br />
  29. <input type="checkbox" name="all[]" value="two" id="two" onClick="swap()"><label for="two">Dwa</label><br />
  30. <input type="checkbox" name="all[]" value="three" id="three" onClick="swap()"><label for="three">Trzy</label><br />
  31. <input type="checkbox" name="all[]" value="four" id="four" onClick="swap()"><label for="four">Cztery</label><br />
  32. <input type="checkbox" name="all[]" value="five" id="five" onClick="swap()"><label for="five">Pięć</label><br />
  33. <input type="checkbox" name="all[]" value="six" id="spells" onClick="swap()"><label for="six">Sześć</label><br />
  34. <br /><button type="submit">Zapisz</button></form><br />
  35. </body>
  36. </html>
[HTML] pobierz, plaintext
LBO
26.01.2006, 13:01:19
ohoho.. nospor.. niezle zes poucinal skrypt.. hehehe, ja ogladalem sobie Stargate Atlantis, w miedzyczasie pisalem odpowiedz, ale twoja lepsiejsza, chlip
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
  2. <html>
  3. <head>
  4. <script language="javascript">
  5. var selected = 0;
  6. function swap(input) {
  7. 	if (input.checked == true) {
  8. 	    selected++;
  9. 	} else {
  10. 	    selected--;
  11. 	}
  12. 	if (selected == 3) {
  13.         for (var i = 0; i < document.form1.elements.length; i++) {
  14.             if (document.form1.elements[i].type == "checkbox" && document.form1.elements[i].checked == false) {
  15. 			    document.form1.elements[i].disabled = true;
  16. 			}
  17.         }
  18. 	} else {
  19.         for (var i = 0; i < document.form1.elements.length; i++) {
  20.             if (document.form1.elements[i].type == "checkbox" && document.form1.elements[i].disabled == true) {
  21. 			    document.form1.elements[i].disabled = false;
  22. 			}
  23.         }
  24. 	}
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <h3>Wybór checkboxów</h3><form method="post" name="form1" action="http://localhost/submit.php">
  30. <input type="checkbox" name="checkboxy[]" value="1" id="id1" onClick="swap(this)"><br />
  31. <input type="checkbox" name="checkboxy[]" value="2" id="id2" onClick="swap(this)"><br />
  32. <input type="checkbox" name="checkboxy[]" value="3" id="id3" onClick="swap(this)"><br />
  33. <input type="checkbox" name="checkboxy[]" value="4" id="id4" onClick="swap(this)"><br />
  34. <input type="checkbox" name="checkboxy[]" value="4" id="id5" onClick="swap(this)"><br />
  35. <input type="checkbox" name="checkboxy[]" value="5" id="id6" onClick="swap(this)"><br />
  36. <br /><button type="submit">Zapisz</button></form><br />
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


L_Devil, oczywiscie nie ma tutaj zadnego sporu, uzyj skyptu nospora

edit: nospor, czy mozna uzyc parent do tego obiektu z parametru (moj skrypt), by uzyskac dostep do calego formularza? jezeli tak to jak?
nospor
26.01.2006, 13:21:48
@LBO
Cytat
nospor, czy mozna uzyc parent do tego obiektu z parametru (moj skrypt), by uzyskac dostep do calego formularza
w tym przypadku parentNode. ale jesli bys te checkboxy osadzil np. w div, to zwrocilo by ci to diva. musialbys wiec leciec po kolejnych rodzicach by wkoncu do forma sie dobrac

pozatym Twoj skrypt ma jedną podstawową wadę. Lecisz po wszystkich checkboxach przy ustawianiu disabled. jesli by wiec dodano innech checkboxy nie zalezne od tych, to i je rowniez bys wylączyl.
Dodatowo tez lecisz po wszystkich polach formularza, co jest zbedne
LBO
26.01.2006, 13:33:11
w sumie mozna by tez twoj skrypcik troszke zmodyfikowac... dodac w parametrze funkcji swap(this.name), a potem uzyc tego w getElementsByName().. dzieki temu w jednym formularzu mozna by zrobic wiecej niz jedna grupe checkboxow z ograniczeniem... co o tym myslisz?
nospor
26.01.2006, 13:37:10
Masz rację. W przypadku gdyby miało być kilka grup checkboxów, to to byłoby dobre rozwiązanie. Ale póki co autorowi chodziło o jedną grupę smile.gif
Wiadome, że w zależności od potrzeb, trzeba by to modyfikować. Poczekajmy co na to autor topicu winksmiley.jpg
L_Devil
26.01.2006, 20:15:07
Nospor, niech ci Pan Bóg w zdrowiu córki wynagrodzi! Dokładnie o to mi chodziło smile.gif Szybkie, krótkie, oszczędne. Dzięki wielkie!
Ogotay
27.02.2006, 14:29:53
Cytat
w sumie mozna by tez twoj skrypcik troszke zmodyfikowac... dodac w parametrze funkcji swap(this.name), a potem uzyc tego w getElementsByName().. dzieki temu w jednym formularzu mozna by zrobic wiecej niz jedna grupe checkboxow z ograniczeniem... co o tym myslisz?


Cytat
Masz rację. W przypadku gdyby miało być kilka grup checkboxów, to to byłoby dobre rozwiązanie. Ale póki co autorowi chodziło o jedną grupę smile.gif


Czolem

Podepne sie pod topic, bo szukam takiego rozwiazania dla grup checkboxow:

check1.1
check1.2
check1.3

check2.1
check2.2
check2.3

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