[JavaScript] Odczytywanie wartości z pola checkbox w czasie rzeczywisty, Opcje

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

Ten post edytował maniek.kos 13.02.2013, 00:14:07

[Michasko]

Musisz edytować kod odpowiedzialny za suwak:

[JAVASCRIPT] pobierz, plaintext 
slide: function(event, ui) {
  if($("#TwojCheckbox").is(":checked"))
  {
    $("#div").val(ui.value);
    uncheckPresets();
    updatePrice();
  }
  else
  {
    $("#div").val(0);
  }
});
[JAVASCRIPT] pobierz, plaintext 

[maniek.kos]

html:

[HTML] pobierz, plaintext 
<div   id="ios2" ><input class="ios"   id="ios" name="ios" type="checkbox"    value="1"></div>
[HTML] pobierz, plaintext 

A cały js wyglada mniej wiecej tak

[JAVASCRIPT] pobierz, plaintext 
     <script type="text/javascript">
    var unitPrice = 1;
 		unitPrice2 = 2.56;
		unitPrice3 = 3;
 		unitPrice4 = 4;
		unitPrice5 = 2;
 
    function updatePrice() {
       var units = Math.round($("#cpu").val()       / 1);
           units2 =  Math.round($("#ram").val()       / 1024);
            units3 =  Math.round($("#quota").val()       / 10);
			units4 =  Math.round($("#bandwidth").val()       / 1); 
			units5 =  Math.round($("#ios").val() / 1 );      
 
 var num = (units * unitPrice) + (units2 * unitPrice2) + (units3 * unitPrice3) + (units4 * unitPrice4) + (units5 * unitPrice5);
var n=num.toFixed(2);
 
       $("#monthly_price").text(n);
 
 
 
 
 
 
       $("#daily_price").text(Math.round(n / 30.5 * 100) / 100);
    }
 
    function uncheckPresets() {
       $("input[name=preset]").blur();
       $("input[name=preset]").attr("checked", false);
       $("input[name=preset]").button("refresh");
    }
 
    function setupSlides(cpu, ram, quota, bandwidth, ios) {
       $("#cpu").val(cpu); $("#sl_cpu").slider("value", cpu);
       $("#ram").val(ram); $("#sl_ram").slider("value", ram);
       $("#quota").val(quota); $("#sl_quota").slider("value", quota);
       $("#bandwidth").val(bandwidth); $("#sl_bandwidth").slider("value", bandwidth);
		$("#ios").val(ios); $("#ios2").slider("value", ios);
       updatePrice();
    }
 
    $("#sl_cpu").slider( {
       range: "min",
       animate: true,
       step: 1,
       value: 2,
       min: 1,
       max: 6,
       slide: function(event, ui) {
          $("#cpu").val(ui.value);
          uncheckPresets();
          updatePrice();
       }
    } );
 
    $("#sl_ram").slider( {
       range: "min",
       animate: true,
       step: 1024,
       value: 2048,
       min: 2048,
       max: 16384,
       slide: function(event, ui) {
          $("#ram").val(ui.value);
          uncheckPresets();
          updatePrice();
       }
    } );
 
    $("#sl_quota").slider( {
       range: "min",
       animate: true,
       step: 10,
       value: 20,
       min: 20,
       max: 400,
       slide: function(event, ui) {
          $("#quota").val(ui.value);
          uncheckPresets();
          updatePrice();
       }
    } );
 
    $("#sl_bandwidth").slider( {
       range: "min",
       animate: true,
       step: 1,
       value: 1,
       min: 2,
       max: 10,
       slide: function(event, ui) {
          $("#bandwidth").val(ui.value);
          uncheckPresets();
          updatePrice();
       }
    } );
 
	    $("#ios2").slider( {
       range: false,
 
       animate: true,
       step: 0,
       value: 0,
       min: 0,
       max: 1,
 
       slide: function(event, ui) {
 
 
	   if($("#ios").is(":checked"))
    {
    $("#ios2").val(ui.value);
    uncheckPresets();
    updatePrice();
    }
    else
    {
    $("#ios2").val(0);
    }
 
	   }} );
 
 
 
    $("#presets").buttonset();
    $("#submit").button();
 
    setupSlides(1, 2048, 20, 2, 0);
 
    $("#preset_opt").attr("checked", true);
    $("#preset_opt").button("refresh");
   </script>
[JAVASCRIPT] pobierz, plaintext 

Ale dalej nie działa

Ten post edytował maniek.kos 13.02.2013, 01:01:43