Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] limit zaznaczeń dla pola checkbox + opis w ukrytym div'ie
Forum PHP.pl > Forum > Po stronie przeglądarki
cytrysek
5.03.2008, 00:05:28
Znalazłem taki kod :

[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3.  <head>
  4.  <script type="text/javascript">
  5.         <!--
  6.         function showMe (it, box) {
  7.           var vis = (box.checked) ? "block" : "none";
  8.           document.getElementById(it).style.display = vis;
  9.         }
  10.         //-->
  11.  </script>
  12.  </head>
  13.  
  14.  <body>
  15.  
  16.  <form>
  17.  <input type="checkbox" name="modtype"  value="value1"
  18.  onclick="showMe('div1', this)" />value1
  19.  
  20.  <input type="checkbox" name="modtype"  value="value2"
  21.  onclick="showMe('div1', this)" />value2
  22.  
  23.  <input type="checkbox" name="modtype"  value="value3"
  24.  onclick="showMe('div2', this)" />value3
  25.  
  26.  <input type="checkbox" name="modtype"  value="value4"
  27.  onclick="showMe('div3', this)" />value4
  28.  
  29.  <input type="checkbox" name="modtype"  value="value5"
  30.  onclick="showMe('div4', this)" />value5
  31.  
  32.  <div class="row" id="div1" style="display:none">Show Div 1</div>
  33.  <div class="row" id="div2" style="display:none">Show Div 2</div>
  34.  <div class="row" id="div3" style="display:none">Show Div 3</div>
  35.  <div class="row" id="div4" style="display:none">Show Div 4</div>
  36.  </form>
  37.  
  38.  </body>
  39.  
  40.  </html>
[HTML] pobierz, plaintext



a jak zrobić, by ograniczyć możliwość zaznaczenia pola checkbox do np. 2 sztuk i jednocześnie dostać monit w stylu alert lub info że za dużo się zaznaczyłow - w ukrytym div'ie ?

Dodatkowo po zaznaczenieu np. 3 boxa w przypadku limitu na 2 możliwe, pole 3 się nie zaznaczy i nie pojawi się 3 opis z ukrytego diva?

Dzięki za pomoc.
PW
rafaelb
5.03.2008, 11:46:10
tak na szybko napisane , chyba o to Ci chodziło

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. <head>
  5. <script type="text/javascript">
  6. <!--
  7. function showMe (it, box) {
  8. 	var ile = 0;
  9. 	var max = 2;
  10.  
  11. 	for (i = 0; i < document.forms[0].elements.length; i++) {
  12.     	if ((document.forms[0].elements[i].type == "checkbox") && (document.forms[0].elements[i].checked == true)) ile++;
  13. 		}
  14. 	if (ile>max){
  15. 		 alert ("Wybrałeś za dużo \n\nMaksymalnie "+max);
  16. 		 box.checked = false;
  17. 		 return;
  18. 	}else{
  19. 		var vis = (box.checked) ? "block" : "none";
  20. 		document.getElementById(it).style.display = vis;
  21. 	}	
  22. };
  23. //-->
  24. </script>
  25. </head>
  26. <body>
  27.  
  28. <form>
  29. <input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
  30. <input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
  31. <input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
  32. <input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
  33. <input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
  34.  
  35. <div class="row" id="div1" style="display:none">Show Div 1</div>
  36. <div class="row" id="div2" style="display:none">Show Div 2</div>
  37. <div class="row" id="div3" style="display:none">Show Div 3</div>
  38. <div class="row" id="div4" style="display:none">Show Div 4</div>
  39. </form>
  40.  
  41. </body>
  42. </html>
[HTML] pobierz, plaintext
lord_t
5.03.2008, 13:24:48
rafaelb A po co tam ta pętla? Co jeśli byś miał 1000 checkboxów? Za każdym ptaszkiem przelatywałbyś po 1000-elementowej tablicy?

Ja to widzę tak:
[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <head>
  4. <script type="text/javascript">
  5. <!--
  6. var licznik=0;
  7. var max  =2;
  8.  
  9. function showMe (it, box) {
  10. var vis="none";
  11.  
  12. if (box.checked) {
  13.  if(licznik<max) {
  14.    vis= "block";
  15.    licznik++;
  16.   }
  17.  else{
  18.  box.checked=false;
  19.  document.getElementById('divAlert').style.display="block";
  20.  }
  21. }
  22. else{
  23.  licznik--;
  24.  document.getElementById('divAlert').style.display="none";
  25.  }
  26. document.getElementById(it).style.display = vis;
  27. }
  28. //-->
  29. </script>
  30. </head>
  31.  
  32. <body>
  33.  
  34. <form>
  35. <input type="checkbox" name="modtype" value="value1"
  36. onclick="showMe('div1', this)" />value1
  37.  
  38. <input type="checkbox" name="modtype" value="value2"
  39. onclick="showMe('div1', this)" />value2
  40.  
  41. <input type="checkbox" name="modtype" value="value3"
  42. onclick="showMe('div2', this)" />value3
  43.  
  44. <input type="checkbox" name="modtype" value="value4"
  45. onclick="showMe('div3', this)" />value4
  46.  
  47. <input type="checkbox" name="modtype" value="value5"
  48. onclick="showMe('div4', this)" />value5
  49.  
  50. <div id="divAlert" style="display:none">Można zaznaczyć tylko 2 checkboxy!</div>
  51. <div class="row" id="div1" style="display:none">Show Div 1</div>
  52. <div class="row" id="div2" style="display:none">Show Div 2</div>
  53. <div class="row" id="div3" style="display:none">Show Div 3</div>
  54. <div class="row" id="div4" style="display:none">Show Div 4</div>
  55. </form>
  56.  
  57. </body>
  58.  
  59. </html>
[HTML] pobierz, plaintext
cytrysek
26.03.2008, 00:21:14
Dziękuję.
Bardzo ładnie działa smile.gif
pzdr.
PW

Witam ponownie.

Potrzebuje dodać jeszcze jedną funkcjonalność do tego skryptu.
A mianowicie, potrzebuje wrzucic wartosci value z kazdego zaznaczonego checkboxa do jednego pola input, wartosci oddzielone jakims separatorem, np srednikiem.
Do tej pory robilem to tak:

[HTML] pobierz, plaintext 
  1. <script language="javascript" type="text/javascript">
  2. <!--
  3. onload= function(){
  4. var d=document.forms[0],w=d.length;
  5. while(w--){
  6. if(d[w].type=="checkbox"){
  7. d[w].onclick=function(){
  8. var f=this.form,x=f.length,temp=[];
  9. while(x--){
  10. if(f[x].type=="checkbox"  && f[x].checked){
  11. temp.push(f[x].value);
  12. }
  13. }
  14. this.form.hiddenZbiorczo.value=temp.join("; ");
  15. }
  16. }
  17. }
  18. }
  19. -->
  20. </script>  
  21. ....
  22. <input name="hiddenZbiorczo" value=" " type="text" size="50" readonly="true">
[HTML] pobierz, plaintext


takie coś daje mi w value wartosci typu: "value3;value4;..." w zaleznosci jaki checkbox zostanie zaznaczony - przenosi jego wartosc i separuje ";"

Tyle, że nie działa mi to razem z poprzedmin skryptem, tzn nie pokazują sie juz ukryte divy.

A moze by te 2 rzeczy jakos ladnie pogodzić?
Ktoś pomoże?

Dzięki.
PW
lord_t
26.03.2008, 23:01:50
Nie działa ponieważ w 1. skrypcie przypisujesz do elementów formularza, dla zdarzenia onclick, funkcję showMe(..).
W 2. skrypcie zmieniasz funkcję przypisaną do zdarzenia onclick => showMe już tam nie ma.

Rozwiązanie?
Proponowałbym do showMe dopisać dodawanie/odejmowanie do tablicy temp[]. Tam też zrobić przepisywanie temp do inputa (hiddenZbiorczo).
A deklarację tablicy temp[] zrobić za:

Kod
var licznik=0;
var max =2;
c3l3r1on
21.08.2012, 00:53:07
Witam,

Sorry ze odswiezam tak stary temat, jednak chcialbym sie spytac jak wyswietlic zmienna licznik, czyli tak aby np po zaznaczeniu 1 checkboxa wyswietlilo mi ze "1 zaznaczony", a przy 2 ( oczywiscie wczesniej zmieniajac max=2 na np 5), "2 zaznaczone" itd itp.

Teoretycznie wiem jak to wyswietlic, jednak niewiem gdzie to wkleic aby dzialalo
Kod
<script>document.write("Zaznaczono " + licznik + " checkbox'ów.");</script>



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