Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pomoc w ustawieniu checboxów
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
spayk
5.05.2010, 09:54:03
Prosze skorygowac kod poniżej bo coś mi się zdaje ze troche namieszałem

Java Script
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3. $(document).ready(function() {
  4.  
  5. 	/* see if anything is previously checked and reflect that in the view*/
  6. 	$(".checklist input:checked").parent().addClass("selected");
  7.  
  8. 	/* handle the user selections */
  9. 	$(".checklist .checkbox-select").click(
  10. 		function(event) {
  11. 			event.preventDefault();
  12. 			$(this).parent().addClass("selected");
  13. 			$(this).parent().find(":checkbox").attr("checked","checked");
  14.  
  15. 		}
  16. 	);
  17.  
  18. 	$(".checklist .checkbox-deselect").click(
  19. 		function(event) {
  20. 			event.preventDefault();
  21. 			$(this).parent().removeClass("selected");
  22. 			$(this).parent().find(":checkbox").removeAttr("checked");
  23.  
  24.  
  25. 		}
  26. 	);
  27.  
  28. });
  29.  
  30. 	</script>
  31. 	<script type="text/javascript">
  32. function Chmurka(T,t){
  33. T.title=''
  34. T.parentNode.lastChild.style.display=t?'block':'none'
  35. }
  36. </script>
  37.  
  38. </head>
[HTML] pobierz, plaintext





[spoiler]Checboxy

[HTML] pobierz, plaintext 
  1. <form action="losowanie.php" method="post">
  2. 					<div id="losowanie1">
  3. 						<div id="losowanie1a"></div>
  4. 						<div id="losowanie1b"></div>
  5. 						<div id="losowanie1c">
  6.  
  7.  
  8. 						<div id="losowanie1c1">
  9. 							<div id="numery">
  10. 								<ul class="checklist">
  11. 									<li>
  12. 										<br>
  13. 										<a class="checkbox-select" href="#"><input id="choice_a" name="1" value="1" type="checkbox">
  14. 										<label for="choice_a">1</label></a>
  15. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="1" value="1" type="checkbox">
  16. 										<label for="choice_a">1</label></a>
  17. 									</li>
  18. 									<li>
  19. 										<br>
  20. 										<a class="checkbox-select" href="#"><input id="choice_a" name="2" value="2" type="checkbox">
  21. 										<label for="choice_a">2</label></a>
  22. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="2" value="2" type="checkbox">
  23. 										<label for="choice_a">2</label></a>
  24. 									</li>
  25. 									<li>
  26. 										<br>
  27. 										<a class="checkbox-select" href="#"><input id="choice_a" name="3" value="3" type="checkbox">
  28. 										<label for="choice_a">3</label></a>
  29. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="3" value="3" type="checkbox">
  30. 										<label for="choice_a">3</label></a>
  31. 									</li>
  32. 									<li>
  33. 										<br>
  34. 										<a class="checkbox-select" href="#"><input id="choice_a" name="4" value="4" type="checkbox">
  35. 										<label for="choice_a">4</label></a>
  36. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="4" value="4" type="checkbox">
  37. 										<label for="choice_a">4</label></a>
  38. 									</li>									
  39. 									<li>
  40. 										<br>
  41. 										<a class="checkbox-select" href="#"><input id="choice_a" name="5" value="5" type="checkbox">
  42. 										<label for="choice_a">5</label></a>
  43. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="5" value="5" type="checkbox">
  44. 										<label for="choice_a">5</label></a>
  45. 									</li>
  46. 									<li>
  47. 										<br>
  48. 										<a class="checkbox-select" href="#"><input id="choice_a" name="6" value="6" type="checkbox">
  49. 										<label for="choice_a">6</label></a>
  50. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="6" value="6" type="checkbox">
  51. 										<label for="choice_a">6</label></a>
  52. 									</li>										
  53. 									<li>
  54. 										<br>
  55. 										<a class="checkbox-select" href="#"><input id="choice_a" name="7" value="7" type="checkbox">
  56. 										<label for="choice_a">7</label></a>
  57. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="7" value="7" type="checkbox">
  58. 										<label for="choice_a">7</label></a>
  59. 									</li>
  60. 									<li>
  61. 										<br>
  62. 										<a class="checkbox-select" href="#"><input id="choice_a" name="8" value="8" type="checkbox">
  63. 										<label for="choice_a">8</label></a>
  64. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="8" value="8" type="checkbox">
  65. 										<label for="choice_a">8</label></a>
  66. 									</li>										
  67. 									<li>
  68. 										<br>
  69. 										<a class="checkbox-select" href="#"><input id="choice_a" name="9" value="9" type="checkbox">
  70. 										<label for="choice_a">9</label></a>
  71. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="9" value="9" type="checkbox">
  72. 										<label for="choice_a">9</label></a>
  73. 									</li>
  74. 									<li>
  75. 										<br>
  76. 										<a class="checkbox-select" href="#"><input id="choice_a" name="10" value="10" type="checkbox">
  77. 										<label for="choice_a">10</label></a>
  78. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="10" value="10" type="checkbox">
  79. 										<label for="choice_a">10</label></a>
  80. 									</li>
  81. 									<li>
  82. 										<br>
  83. 										<a class="checkbox-select" href="#"><input id="choice_a" name="11" value="11" type="checkbox">
  84. 										<label for="choice_a">11</label></a>
  85. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="11" value="11" type="checkbox">
  86. 										<label for="choice_a">11</label></a>
  87. 									</li>
  88. 									<li>
  89. 										<br>
  90. 										<a class="checkbox-select" href="#"><input id="choice_a" name="12" value="12" type="checkbox">
  91. 										<label for="choice_a">12</label></a>
  92. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="12" value="12" type="checkbox">
  93. 										<label for="choice_a">12</label></a>
  94. 									</li>									
  95. 									<li>
  96. 										<br>
  97. 										<a class="checkbox-select" href="#"><input id="choice_a" name="13" value="13" type="checkbox">
  98. 										<label for="choice_a">13</label></a>
  99. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="13" value="13" type="checkbox">
  100. 										<label for="choice_a">13</label></a>
  101. 									</li>
  102. 									<li>
  103. 										<br>
  104. 										<a class="checkbox-select" href="#"><input id="choice_a" name="14" value="14" type="checkbox">
  105. 										<label for="choice_a">14</label></a>
  106. 										<a class="checkbox-deselect" href="#"><input id="choice_a" name="14" value="14" type="checkbox">
  107. 										<label for="choice_a">14</label></a>
  108. 									</li>									
  109.  
  110. 								</ul>
  111. 							</div>
  112. 							</div>
  113. 							<div id="losowanie1c2"><div id="reset"><input type="reset"  class="reset" value=" "></div></div>
  114. 						</div>
  115. 						<div id="losowanie1d"></div>
  116. 					</div>
  117. 					<div id="losowanie2"><div id="wyslij"><img src="images/wyslij.png"></div></div></form>
[HTML] pobierz, plaintext

[/spoiler]

[spoiler]CSS

[XML] pobierz, plaintext 
  1. .checklist {
  2. 	list-style: none;
  3. 	margin: 0;
  4. 	padding: 0;
  5. }
  6.  
  7. .checklist li {
  8. 	float: left;
  9. 	margin-right: 0px;
  10. 	background: url(i/off.png) no-repeat 0 0;
  11. 	width: 49px;
  12. 	height: 50px;
  13. 	position: relative;
  14. 	font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
  15. }
  16.  
  17. .checklist li.selected {
  18. 	background: url(i/on.png) no-repeat 0 0;
  19. 	border: 0px;
  20. }
  21.  
  22. .checkbox-select {
  23. 	display: block;
  24. 	float: center;
  25. 	font-size: medium;
  26. 	margin: -10px auto;
  27.  
  28.  
  29.  
  30. }
  31.  
  32. .checklist li input {
  33. 	display: none;	
  34. }
  35.  
  36. a.checkbox-deselect {
  37. 	display: none;
  38. 	color: black;
  39. 	font-weight: bold;
  40. 	border: 0px;
  41. 	text-align:center;
  42. 	font-size: medium;
  43. 	margin: -36px auto;
  44. }
  45.  
  46. .checklist li.selected a.checkbox-deselect {
  47. 	display: block;
  48. }
  49.  
  50. .checklist li label {
  51. 	display: block;
  52. 	text-align: center;
  53. 	padding: 8px;
  54. }
  55.  
[XML] pobierz, plaintext

[/spoiler]







Wszystko niby ładnie wygląda tekst mam na checboxie ale przycisk reset niedziała i obawiam sie ze te checboxy są coś źle zrobione
nospor
5.05.2010, 09:58:49
czemu dajesz to do CSS? Przeciez to nie ma związku z css - przenosze.

ps: czemu ma sluzyc dawanie checkboxa w A ?
spayk
8.05.2010, 16:19:53

wszystko niby działa ale przycisk reset nie smiga ktoś może luknie ?
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.