How to pre-select a checkbox, and perform function, based on url hash

Question

I am a newbee so I hope my explanation makes sense.

I am setting up a product list page with a checkbox filter section. I would like to be able to pre-select options and apply the filter/function based on the url hash of a link from a previous page.

I have js for my filter function...

$('.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');
        }
      });
    }
});

and js to pre-check a checkbox based on the url hash...

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

Here is also my html, if that is helpful.

<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>

Link on previous page...

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

What I would like to happen is, by clicking on the link it will take you to the product listing page and the content will automatically be filtered and the checkbox select. However, now it is checking the box but not performing the filter function.

Any help would be appreciated. Thank you!!

Answer 1

Changing the checkbox property of checked will not trigger the onChange event. What you need to do is create a function to be called by above 2 events.

 $('.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")); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

Just add $('.category').trigger('change'); after $("#check1").prop("checked", !$("#check1").prop("checked")); .