如何根据 url 哈希预选复选框并执行功能答案

【问题标题】：How to pre-select a checkbox, and perform function, based on url hash如何根据 url 哈希预选复选框并执行功能
【发布时间】：2023-03-19 22:34:02
【问题描述】：

我是新手，所以我希望我的解释是有道理的。

我正在设置一个带有复选框过滤器部分的产品列表页面。我希望能够预先选择选项并根据上一页链接的 url 哈希应用过滤器/功能。

我的过滤功能有 js...

$('.category').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
        var category = $(this).val();
        category_list.push(category); //Push each check item's value into an array
    });

    if(category_list.length == 0) {
        $('.resultblock').fadeIn();
    }
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > -1){ //Check if data-tag's value is in array
          $(this).fadeIn('slow');
        }
        else{
          $(this).fadeOut('fast');
        }
      });
    }
});

和js根据url哈希预先检查一个复选框...

$(document).ready(function(){
    var hash = location.hash;  
    if(hash=="#myHash"){
      $("#check1").prop("checked", !$("#check1").prop("checked"));
    }
});

这也是我的 html，如果有帮助的话。

<div class="filter--container">
    <div id="filters">
      <div class="filterblock">
        <input id="check1" type="checkbox" name="check" value="filter1" class="category">
        <label class="checkbox-label" for="check1">Filter 1</label>
      </div>

      <div class="filterblock">
        <input id="check2" type="checkbox" name="check" value="filter2" class="category">
        <label class="checkbox-label" for="check2">Filter 2</label>
      </div>
    </div>
</div>

<div class="resultblock" data-tag="filter1">
  MyContent
</div>
<div class="resultblock" data-tag="filter2">
  MyContent
</div>

上一页的链接...

<a href="www.domain.com/#myHash" id="select-checkbox1">link</a>

我希望发生的是，通过单击链接，您将转到产品列表页面，内容将自动被过滤并选中复选框。但是，现在它是在选中该框，但不执行过滤功能。

任何帮助将不胜感激。谢谢！！

【问题讨论】：

标签： javascript html function url checkbox

【解决方案1】：

更改checked 的复选框属性不会触发onChange 事件。您需要做的是创建一个由上述 2 个事件调用的函数。

$('.category').on('change', function() {
  filtering($(this));
});

function filtering(checkbox) {
  var category_list = [];
  $('#filters :input:checked').each(function() {
    var category = checkbox.val();
    category_list.push(category); //Push each check item's value into an array
  });

  if (category_list.length == 0) {
    $('.resultblock').fadeIn();
  } else {
    $('.resultblock').each(function() {
      var item = $(this).attr('data-tag');
      if (jQuery.inArray(item, category_list) > -1) { //Check if data-tag's value is in array
        $(this).fadeIn('slow');
      } else {
        $(this).fadeOut('fast');
      }
    });
  }
}

$(document).ready(function() {
  var hash = location.hash;
  if (hash == "#myHash") {
    $("#check1").prop("checked", !$("#check1").prop("checked"));
    filtering($("#check1"));
  }
});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

非常感谢您的帮助。这很好用，除了现在当我选择另一个过滤器选项时，它不能正确显示过滤后的内容。您对如何防止此解决方案在选择其他过滤器时产生干扰有什么建议吗？

【解决方案2】：

只需在$("#check1").prop("checked", !$("#check1").prop("checked")); 之后添加$('.category').trigger('change');。

【讨论】：