如何在滑块上切换复选框？

Question

我有一个简单的 JQuery Ui 滑块，其中包含隐藏的复选框。我需要添加切换滑块的功能，从而更改复选框值。

我该怎么做？

Codepen example.

HTML

<div style="margin-top: 50px"></div>

<div class="col-md-1">
  <div id="slider">
    <input type="checkbox">
  </div>
</div>

JS

  $(function() {
    $( "#slider" ).slider({
      step : 99,
      animate : 'slow'
    });
  });

Answer 1

您可以像这样移动幻灯片来检查和取消选中

  $(function() {
    $( "#slider" ).slider({
      min: 0,
      max: 1,
      animate : 'slow',
      slide: function( event, ui ) {
        if(ui.value > 0){
          $("#slider input[type='checkbox']").prop("checked", true);
        } else {
          $("#slider input[type='checkbox']").prop("checked", false);
        }
      }
    });
  });

Answer 2

因此，您需要在滑块停止时检查该值。这可以这样做：

import random
x= random.randint(1,1000)

##set range
high = (1000)
low = (1)

while x != high:
    mid = round(high//2, 0)
    if x == mid:
        print mid
        print ("print you have found x")
        break
    elif x > mid:
        low = mid
        print low
    elif x < mid:
        high = mid
        print high
    else:
        break

$(function() { $("#slider").slider({ step: 99, animate: 'slow', stop: function(e, ui) { if (ui.value > 0) { $("#slider input[type='checkbox']").prop("checked", true); } } }); }); 将为0或100.因此，当滑块位于右侧时，它处于100％值或某个值。它将超过0，这就是我们检查的内容。

详细了解此活动功能：http://api.jqueryui.com/slider/#event-stop