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

将课程textboxes添加到您的第一个文本框中：

添加jquery：

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

DEMO

修改

我认为这是你正在寻找的东西：

New DEMO

Answer 2

在这里，你是一个解决问题的工作小提琴:) 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();
  }
});

请告诉我这是否是您要完成的事情：）

计算文本框值的总和+ jQuery UI Slider的值

2 个答案: