Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Odczytywanie wartości z pola checkbox w czasie rzeczywisty,
Forum PHP.pl > Forum > Przedszkole
maniek.kos
Witam, mam napisany skrypt, który zmienia zwykły input na taki pasek, suwak, który mozna przeciągać.

$("#s_div").slider( {
range: "min",
animate: true,
step: 1,
value: 1,
min: 2,
max: 10,
slide: function(event, ui) {
$("#div").val(ui.value);
uncheckPresets();
updatePrice();
}
} );

i ten kod z input type text mi robi pasek i można przeciągać i gdzieś na dole strony pokazuję się od razu wartość z tego pola.

Moje pytanie: Co nalezy zmienić, aby po zaznaczeniu input type checkbox także zmieniało na dole daną wartośc. Czyli jak jest odznaczone to pokazuje np 0, a jak zaznaczymy pokaże nam 1.


Podobnie działa jak to:
http://www.ufragg.com/code.php?id=128

Tylko tam nie ma pola do zaznaczania i wyświetlania jego wartości.
Michasko
Musisz edytować kod odpowiedzialny za suwak:
[JAVASCRIPT] pobierz, plaintext
  1. slide: function(event, ui) {
  2. if($("#TwojCheckbox").is(":checked"))
  3. {
  4. $("#div").val(ui.value);
  5. uncheckPresets();
  6. updatePrice();
  7. }
  8. else
  9. {
  10. $("#div").val(0);
  11. }
  12. });
[JAVASCRIPT] pobierz, plaintext
maniek.kos
html:

  1. <div id="ios2" ><input class="ios" id="ios" name="ios" type="checkbox" value="1"></div>


A cały js wyglada mniej wiecej tak

[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2. var unitPrice = 1;
  3. unitPrice2 = 2.56;
  4. unitPrice3 = 3;
  5. unitPrice4 = 4;
  6. unitPrice5 = 2;
  7.  
  8. function updatePrice() {
  9. var units = Math.round($("#cpu").val() / 1);
  10. units2 = Math.round($("#ram").val() / 1024);
  11. units3 = Math.round($("#quota").val() / 10);
  12. units4 = Math.round($("#bandwidth").val() / 1);
  13. units5 = Math.round($("#ios").val() / 1 );
  14.  
  15. var num = (units * unitPrice) + (units2 * unitPrice2) + (units3 * unitPrice3) + (units4 * unitPrice4) + (units5 * unitPrice5);
  16. var n=num.toFixed(2);
  17.  
  18. $("#monthly_price").text(n);
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25. $("#daily_price").text(Math.round(n / 30.5 * 100) / 100);
  26. }
  27.  
  28. function uncheckPresets() {
  29. $("input[name=preset]").blur();
  30. $("input[name=preset]").attr("checked", false);
  31. $("input[name=preset]").button("refresh");
  32. }
  33.  
  34. function setupSlides(cpu, ram, quota, bandwidth, ios) {
  35. $("#cpu").val(cpu); $("#sl_cpu").slider("value", cpu);
  36. $("#ram").val(ram); $("#sl_ram").slider("value", ram);
  37. $("#quota").val(quota); $("#sl_quota").slider("value", quota);
  38. $("#bandwidth").val(bandwidth); $("#sl_bandwidth").slider("value", bandwidth);
  39. $("#ios").val(ios); $("#ios2").slider("value", ios);
  40. updatePrice();
  41. }
  42.  
  43. $("#sl_cpu").slider( {
  44. range: "min",
  45. animate: true,
  46. step: 1,
  47. value: 2,
  48. min: 1,
  49. max: 6,
  50. slide: function(event, ui) {
  51. $("#cpu").val(ui.value);
  52. uncheckPresets();
  53. updatePrice();
  54. }
  55. } );
  56.  
  57. $("#sl_ram").slider( {
  58. range: "min",
  59. animate: true,
  60. step: 1024,
  61. value: 2048,
  62. min: 2048,
  63. max: 16384,
  64. slide: function(event, ui) {
  65. $("#ram").val(ui.value);
  66. uncheckPresets();
  67. updatePrice();
  68. }
  69. } );
  70.  
  71. $("#sl_quota").slider( {
  72. range: "min",
  73. animate: true,
  74. step: 10,
  75. value: 20,
  76. min: 20,
  77. max: 400,
  78. slide: function(event, ui) {
  79. $("#quota").val(ui.value);
  80. uncheckPresets();
  81. updatePrice();
  82. }
  83. } );
  84.  
  85. $("#sl_bandwidth").slider( {
  86. range: "min",
  87. animate: true,
  88. step: 1,
  89. value: 1,
  90. min: 2,
  91. max: 10,
  92. slide: function(event, ui) {
  93. $("#bandwidth").val(ui.value);
  94. uncheckPresets();
  95. updatePrice();
  96. }
  97. } );
  98.  
  99. $("#ios2").slider( {
  100. range: false,
  101.  
  102. animate: true,
  103. step: 0,
  104. value: 0,
  105. min: 0,
  106. max: 1,
  107.  
  108. slide: function(event, ui) {
  109.  
  110.  
  111. if($("#ios").is(":checked"))
  112. {
  113. $("#ios2").val(ui.value);
  114. uncheckPresets();
  115. updatePrice();
  116. }
  117. else
  118. {
  119. $("#ios2").val(0);
  120. }
  121.  
  122. }} );
  123.  
  124.  
  125.  
  126. $("#presets").buttonset();
  127. $("#submit").button();
  128.  
  129. setupSlides(1, 2048, 20, 2, 0);
  130.  
  131. $("#preset_opt").attr("checked", true);
  132. $("#preset_opt").button("refresh");
  133. </script>
[JAVASCRIPT] pobierz, plaintext


Ale dalej nie działa
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.