代码之家 › 专栏 › 技术社区 › Mona Coder

使用Checkbox事件绑定jqueryui滑块的问题

jquery javascript

Mona Coder · 技术社区 · 6 年前

我可以在jqueryui滑块上选中和取消选中一些复选框 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>

1 回复 | 直到 6 年前

gmfm 6 年前

我相信prop(“checked”,{value})不会触发change事件,您还需要添加trigger(“change”)

$(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);
                $("input:checkbox[name=temple][value=" + value + "]").trigger("change");
              })

            }
          });
          $("#amount").val("$" + $("#slider-range").slider("values", 0) +
            " - $" + $("#slider-range").slider("values", 1));

        $('input:checkbox[name=temple]').on('change', function() {
          if ($(this).prop("checked")){
            console.log('Checked');
          } else {
            console.log('Un Checked');
          }
        });
});