复选框选项的 jquery 滑块并获取值

Question

我有一些带有值的复选框选项，我需要将其转换为从第一个值到最后一个值的滑块，例如价格过滤器滑块。随着滑块的移动，超出范围的选项将变为未选中状态。就像价格滑块一样。

<ul class="filter_group sub38" data-feature="38" data-feature_url="memmorysize">
                    
                    <li class="filter_list first">
                        <label class="filter_label">
                            <input class="filter_input cb2" data-feature_url="" type="checkbox" checked="">
                            <span data-language="83">All</span>
                        </label>
                    </li>
                    
                                            <li class="filter_list">
                            <label class="filter_label">
                                <input class="filter_input cb3" data-option_url="4096" type="checkbox">
                                <span>4096</span>
                            </label>
                        </li>
                                            <li class="filter_list">
                            <label class="filter_label">
                                <input class="filter_input cb3" data-option_url="8192" type="checkbox">
                                <span>8192</span>
                            </label>
                        </li>
                                            <li class="filter_list">
                            <label class="filter_label">
                                <input class="filter_input cb3" data-option_url="12288" type="checkbox">
                                <span>12288</span>
                            </label>
                        </li>
                                            <li class="filter_list">
                            <label class="filter_label">
                                <input class="filter_input cb3" data-option_url="16384" type="checkbox">
                                <span>16384</span>
                            </label>
                        </li>
                                            <li class="filter_list">
                            <label class="filter_label">
                                <input class="filter_input cb3" data-option_url="32768" type="checkbox">
                                <span>32768</span>
                            </label>
                        </li>
                                            <li class="filter_list">
                            <label class="filter_label">
                                <input class="filter_input cb3" data-option_url="40960" type="checkbox">
                                <span>40960</span>
                            </label>
                        </li>
                                                        <div class="show_hide_list sub38" data-feature="38" style="display: none;">Show all</div>
                
                </ul>

我试过使用这个 - https://api.jqueryui.com/slider/。但是，我无法让它工作。请帮助我。

Answer 1

我不得不对你的目标做出一些假设。他们是：

• 除了您现有的复选框外，您还想显示滑块。
• 滑块的最小值为

  4096

  ，最大值为

  40960

  ，并支持介于两者之间的所有

  4096

  增量 - 包括没有相应复选框的值，例如

  28672

  .
• 选中复选框将导致滑块手柄移动到选中的值。
• 取消选中复选框将导致滑块手柄转到比选中框的值小一个增量的值（这意味着最小值复选框，

  4096

  ，不能取消选中，因为它是滑块的最小值).
• 选中“全部”复选框将导致选中所有值复选框并将滑块手柄移动到最大值。
• 取消选中“全部”复选框将导致取消选中所有值复选框并将滑块手柄移动到最小值。

一般来说，这些是您在处理项目时需要澄清的要求，也是您需要在本网站的帖子中包含的详细信息。

$(function () {
  const resetCheckboxes = (event, ui) => {
    const value = ui.value;
    const $slider = $('#Slider');
    const isMaxValue = value === $slider.slider('option', 'max');

    $('[data-option_url]').each(function () {
      const $this = $(this);
      $this.prop('checked', $this.data('option_url') <= value);
    });
    
    $('[data-feature_url=""]').prop('checked', isMaxValue);
  };

  $('#Slider').slider({
    change: resetCheckboxes,
    max: 40960,
    min: 4096,
    slide: resetCheckboxes,
    step: 4096
  });

  $('[data-option_url]').on('change', function () {
    const $this = $(this);
    const thisValue = $this.data('option_url');
    const isChecked = $this.prop('checked');
    const $slider = $('#Slider');
    const value = isChecked ? thisValue : thisValue - $slider.slider('option', 'min');
    const isMaxValue = value === $slider.slider('option', 'max');
    
    $slider.slider('value', value);
    $('[data-feature_url=""]').prop('checked', isMaxValue);
  });

  $('[data-feature_url=""]').on('change', function () {
    const isChecked = $(this).prop('checked');
    const $slider = $('#Slider');
    const option = isChecked ? 'max' : 'min';


    $slider.slider('value', $slider.slider('option', option));
  }).trigger('change');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet"/>
<ul class="filter_group sub38" data-feature="38" data-feature_url="memmorysize">

  <li class="filter_list first">
    <label class="filter_label">
      <input class="filter_input cb2" data-feature_url="" type="checkbox" checked="">
      <span data-language="83">All</span>
    </label>
  </li>

  <li class="filter_list">
    <label class="filter_label">
      <input class="filter_input cb3" data-option_url="4096" type="checkbox">
      <span>4096</span>
    </label>
  </li>
  <li class="filter_list">
    <label class="filter_label">
      <input class="filter_input cb3" data-option_url="8192" type="checkbox">
      <span>8192</span>
    </label>
  </li>
  <li class="filter_list">
    <label class="filter_label">
      <input class="filter_input cb3" data-option_url="12288" type="checkbox">
      <span>12288</span>
    </label>
  </li>
  <li class="filter_list">
    <label class="filter_label">
      <input class="filter_input cb3" data-option_url="16384" type="checkbox">
      <span>16384</span>
    </label>
  </li>
  <li class="filter_list">
    <label class="filter_label">
      <input class="filter_input cb3" data-option_url="32768" type="checkbox">
      <span>32768</span>
    </label>
  </li>
  <li class="filter_list">
    <label class="filter_label">
      <input class="filter_input cb3" data-option_url="40960" type="checkbox">
      <span>40960</span>
    </label>
  </li>
  <div class="show_hide_list sub38" data-feature="38" style="display: none;">Show all</div>

</ul>

<div id="Slider"></div>