計數文本框的值jQuery UI的滑塊+價值

Question

下面就讓我們來看看的和我想要做的事：http://jsfiddle.net/Klisee/u7tw0qwp/12/

基本上我試圖做到以下幾點：添加jQuery UI的滑塊向右在機頂盒旁邊。然後給頂部框的滑塊* 2（簡單部分）的值。最後給底部框所有框的價值。當我滾動滑塊或按下複選框時，所有這些都是實時的。

我的jQuery UI的滑塊很簡單，沒有什麼特別的：

$(function() { 
    $("#slider").slider({ 
     range: "min", 
     value: 0, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
     $("#sliderValue").val(ui.value * 2); 
     } 
    }); 
    }); 

Answer 1

在這裏，你是你的問題的工作小提琴:) http://jsfiddle.net/u7tw0qwp/14/

$('#checkbox1').click(function(){ 
if (this.checked) { 
    $('#textbox1').val(30); 
    updateTotal(); 
} 
else { 
    $('#textbox1').val(0); 
    updateTotal(); 
} 
}); 
$('#checkbox2').click(function(){ 
if (this.checked) { 
    $('#textbox2').val(40); 
    updateTotal(); 
} 
else { 
    $('#textbox2').val(0); 
    updateTotal(); 
} 
}); 
function updateTotal(){ 
var total = 0; 
$('.textboxes').each(function() { 
    total += Number($(this).val()); 
}); 
$('#totalSum').val(total); 
} 
updateTotal(); 

$("#slider").slider({ 
    range: "min", 
    value: 0, 
    min: 0, 
    max: 100, 
    slide: function(event, ui) { 
    $("#sliderValue").val(ui.value * 2); 
     updateTotal(); 
    } 
}); 

讓我知道這是你特林什麼來完成:)

Answer 2

添加類textboxes你的第一個文本框，以及：

添加的jQuery：

$("#sliderValue").blur(function(){ 
    updateTotal(); 
}); 

DEMO。

編輯：

我認爲這是你在找什麼：

New DEMO。