0

I have a little problem with jquery ui slider and checkboxes.

Full code is like this:

$(function() {
var slider = function(event,ui){
    var currentvalue = ui.value || $( this ).slider( "option", "value" );

    if ( $('#netocheck').prop("checked") ){

        var tooltip = $(".tooltip").html(currentvalue + "€");
        var neto = $( ".neto" ).html(currentvalue);
        var fond = $( ".fond" ).html(currentvalue + 1000);
        var sotsiaalmaks = $( ".sm" ).html((currentvalue * 33) / 100);
        var tulumaks = $( ".tm" ).html((currentvalue * 21) / 100);
        var kl = $( ".kl" ).html((currentvalue * 2) / 100);
        var bruto = $( ".bruto" ).html(currentvalue);
    }
    else ( $('#brutocheck').prop("checked") ) {

        var tooltip = $(".tooltip").html(currentvalue + "€");
        var bruto = $( ".bruto" ).html(currentvalue + "€");
        var neto = $( ".neto" ).html("neto");
    }

};

$('input.check').on("change", function() {
    $("input.check").not(this).prop("checked", false);
});

$("#slider-range").slider({
  value: 1000,
  min: 100,
  max: 2000,
  step: 100,
  slide: slider,
  create: slider    
});

});

I want that this IF part (and maybe whole slider) work every time i check one of two checkboxes. So checking one checkbox add some values to variables and checking another add different values to same variables.

My added part:

if ( $('#netocheck').prop("checked") ){

        var tooltip = $(".tooltip").html(currentvalue + "€");
        var neto = $( ".neto" ).html(currentvalue);
        var fond = $( ".fond" ).html(currentvalue + 1000);
        var sotsiaalmaks = $( ".sm" ).html((currentvalue * 33) / 100);
        var tulumaks = $( ".tm" ).html((currentvalue * 21) / 100);
        var kl = $( ".kl" ).html((currentvalue * 2) / 100);
        var bruto = $( ".bruto" ).html(currentvalue);
    }
    else ( $('#brutocheck').prop("checked") ) {

        var tooltip = $(".tooltip").html(currentvalue + "€");
        var bruto = $( ".bruto" ).html(currentvalue + "€");
        var neto = $( ".neto" ).html("neto");
    }

And checkboxes:

<span class="check1"><input id="netocheck" class="check" type="checkbox" checked>1</span>
<span class="check2"><input id="brutocheck" class="check" type="checkbox">2</span>
HenerH
  • 19
  • 4

2 Answers2

0

There is an if missing in yor IF part:

if ( $('#netocheck').prop("checked") ){

    var tooltip = $(".tooltip").html(currentvalue + "€");
    var neto = $( ".neto" ).html(currentvalue);
    var fond = $( ".fond" ).html(currentvalue + 1000);
    var sotsiaalmaks = $( ".sm" ).html((currentvalue * 33) / 100);
    var tulumaks = $( ".tm" ).html((currentvalue * 21) / 100);
    var kl = $( ".kl" ).html((currentvalue * 2) / 100);
    var bruto = $( ".bruto" ).html(currentvalue);
}
else if( $('#brutocheck').prop("checked") ) {

    var tooltip = $(".tooltip").html(currentvalue + "€");
    var bruto = $( ".bruto" ).html(currentvalue + "€");
    var neto = $( ".neto" ).html("neto");
}
Jonathan Simas
  • 320
  • 3
  • 10
  • If i click on one of two checkboxes it will load/start that slider variable or that ui function – HenerH Jun 03 '14 at 19:16
0

This is ugly, but works. 

var slider = function(event,ui){    
var currentvalue = ui.value || $( this ).slider(  "value" );
 slideChange(currentvalue);
};
function slideChange(currentvalue){

  if ( $('#netocheck').prop("checked") ){

        var tooltip = $(".tooltip").html(currentvalue + "€");
        var neto = $( ".neto" ).html(currentvalue);
        var fond = $( ".fond" ).html(currentvalue + 1000);
        var sotsiaalmaks = $( ".sm" ).html((currentvalue * 33) / 100);
        var tulumaks = $( ".tm" ).html((currentvalue * 21) / 100);
        var kl = $( ".kl" ).html((currentvalue * 2) / 100);
        var bruto = $( ".bruto" ).html(currentvalue);
    }
    else if( $('#brutocheck').prop("checked") ) {

        var tooltip = $(".tooltip").html(currentvalue + "€");
        var bruto = $( ".bruto" ).html(currentvalue + "€");
        var neto = $( ".neto" ).html("neto");
    }
}

var options = {  
  value: 1000,
  min: 100,
  max: 2000,
  step: 100,
  slide: slider,
  create: slider,
   change:slider    
};

$('input.check').on("change", function() {  
     $("input.check").not(this).prop("checked", false);
     slideChange($("#slider-range").slider('value'));
});

$("#slider-range").slider(options);

E.g.: JSFIDDLE

Jonathan Simas
  • 320
  • 3
  • 10
  • Does anybody know how to make it little easier? – HenerH Jun 03 '14 at 20:24
  • I don't think there is another way to trigger the slide event... I've tried [this](http://stackoverflow.com/questions/1288824/trigger-a-jquery-ui-slider-event) solution, but it doesn't worked for me. Maybe there's is a JQuery UI version issue... – Jonathan Simas Jun 03 '14 at 20:32
  • Oh. I try to understand it now. – HenerH Jun 03 '14 at 20:42
  • I made it little easier to read/understand http://jsfiddle.net/7BDta/1/ Why did you put there "option" variable and "change: slider" part? – HenerH Jun 03 '14 at 20:56
  • I've put the "change : slider" to execute the slider function when the value of the slider changes. This is not the same of "slide", because value can change, oh yes, without any sliding... By the way, I think it can be running slider function twice, so "slide: slider" is no longer necessary... I didn't really tried it, feel free to play on jsfiddle! – Jonathan Simas Jun 03 '14 at 21:16
  • I just discovered one problem more. Checkboxes can be checked and unchecked. But how can i disabe unchecking. So you can just check one or two but not uncheck them. – HenerH Jun 03 '14 at 21:25
  • Maybe a radio input would be more appropiate... You cannot uncheck it – Jonathan Simas Jun 03 '14 at 21:32
  • But I have disain like checkboxes. So i need to just make radio buttons like checkboxes? – HenerH Jun 03 '14 at 21:34
  • Oh, your version is very nice. I found this: http://stackoverflow.com/questions/5839884/make-checkbox-behave-like-radio-buttons-with-javascript But its longer and harder to understand. Your version is better. – HenerH Jun 04 '14 at 18:33