jQueryUI滑块 - 如何获取值

时间:2016-05-20 08:33:58

标签: javascript jquery html jquery-ui

我正在使用复选框和进度滑块创建一个简单的待办事项列表,而且最重要的是将会有一个总进度% -bar来计算每个选中的复选框和滑块的选定值。

我设法获取复选框值,该值在HTML中确定为data-value(我在每个步骤使用HTML中的预定义值,因为每个任务的值不同)并将其打印出来,但我不知道如何获得slider的值。

HTML

<tr>
   <td valign="top">
       <b>Step 1 / layout</b>
   </td>
   <td valign="top">
       <input class="mngr-field" type="checkbox" name="payment_type_mngr_1_01" id="payment_type_mngr_1_01" data-value="10">
            &nbsp; <b>Done</b>
   </td>
</tr>
<tr>
   <td valign="top">
       <b>Step 2</b>
   </td>
   <td valign="top">
       <label for="payment_type_mngr_1_02"><input class="mngr-field mngr-slider" type="text" name="payment_type_mngr_1_02" id="payment_type_mngr_1_02" readonly style="border:0; color:#f6931f; font-weight:bold;"> valmis</label>
       <div id="slider"></div>
   </td>
 </tr>

的JavaScript

// The Slider
$(function () {
    $("#slider").slider({
        value: 0,
        min: 0,
        max: 100,
        step: 10,
        animate: true,
        slide: function (event, ui) {
            $(".mngr-slider").val(ui.value + "%");
        }
    });
    sliderval = $(".mngr-slider").val;
    $(".mngr-slider").val($("#slider").slider("value") + "%");
});


// Total Progress %
$(".mngr-field").on("change", function () {
    var val = this.checked ? $(this).data("value") : '0';
    if ($(this).hasClass("mngr-slider")) {
        val = sliderval / 10;
    }
    console.log(val);
});

所以基本上我要取出滑块值并将其除以10(因为滑块的最大值为100,因此总进度百分比的最大值也是如此。

我的目的是获取价值并将其总结,这样就会有一个总价值推出,如果您可以帮我解决这个问题并提供给至少有关如何统计它的提示,我会很高兴的!

0 个答案:

没有答案