Question

我可以使用以下代码在jQuery ui滑块stop()上选中和取消选中某些复选框。但这似乎没有将任何事件添加到复选框！如您所见，通过重新登录控制台，复选框正在对直接签出进行重新反应，但是在更换滑块时不执行任何操作。为什么会这样，我该如何解决？

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 50,
    max: 54,
    values: [50, 54],
    stop: function(event, ui) {
      var selected = [];
      $('input:checkbox[name=temple]').prop("checked", false);
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

      for (var i = ui.values[0]; i <= ui.values[1]; i++) {
        selected.push(i);
      }
      $.each(selected, function(index, value) {
        $("input:checkbox[name=temple][value=" + value + "]").prop("checked", true);
      })

    }
  });
  $("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));
});

$('input:checkbox[name=temple]').on('change', function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Un Checked');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div class="col-md-3">
  <div id="slider-range"></div>
</div>
</div>
<div class="js-lwidths">


  <input type="checkbox" name="temple" value="50">50<br>
  <input type="checkbox" name="temple" value="51">51<br>
  <input type="checkbox" name="temple" value="52">52<br>
  <input type="checkbox" name="temple" value="53">53<br>
  <input type="checkbox" name="temple" value="54">54<br>

</div>

Answer 1

我相信prop（“ checked”，{value}）不会触发更改事件，您还需要添加触发器（'change'）

尝试：


09-08 00:08:21.986 1811-1827/com.rainliu.androidexercise E/AndroidRuntime: FATAL EXCEPTION: Thread-107
                                                                           android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.
                                                                               at android.view.ViewRootImpl.checkThread(ViewRootImpl.java:4607)
                                                                               at android.view.ViewRootImpl.requestLayout(ViewRootImpl.java:835)
                                                                               at android.view.View.requestLayout(View.java:15129)
                                                                               at android.view.View.requestLayout(View.java:15129)
                                                                               at android.view.View.requestLayout(View.java:15129)
                                                                               at android.view.View.requestLayout(View.java:15129)
                                                                               at android.view.View.requestLayout(View.java:15129)
                                                                               at android.view.View.requestLayout(View.java:15129)
                                                                               at android.widget.RelativeLayout.requestLayout(RelativeLayout.java:292)
                                                                               at android.view.View.requestLayout(View.java:15129)
                                                                               at android.widget.TextView.checkForRelayout(TextView.java:6303)
                                                                               at android.widget.TextView.setText(TextView.java:3547)
                                                                               at android.widget.TextView.setText(TextView.java:3405)
                                                                               at android.widget.TextView.setText(TextView.java:3380)
                                                                               at com.rainliu.androidexercise.rxjava.RxJavaActivity$4$1.run(RxJavaActivity.java:320)

关于将jQuery UI Slider与Checkbox Event绑定的问题

1 个答案: