使用复选框检查重新加载/刷新 jquery ui 滑块

Question

我对 jquery ui 滑块和复选框有一点问题。

完整代码如下：

$(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    
});

});

我希望每次我选中两个复选框之一时，这个 IF 部分（可能还有整个滑块）都能正常工作。因此，选中一个复选框会为变量添加一些值，而选中另一个复选框会为相同的变量添加不同的值。

我添加的部分：

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");
    }

还有复选框：

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

Answer 1

这很难看，但有效。

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);

例如：JSFIDDLE

Answer 2

你的 IF 部分缺少一个 if：

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");
}