Filter elements and change URL with JS/jQuery

Question

I need help with JavaScript/jQuery solution, how to make filter for products with URL changing.

when click on checkbox then show checked colors
when checked more filters show all colors which are checked
if click on "Show all", show all colors (uncheck all filters)
clicking on filter will change URL: red = #f/red; blue = #f/blue; red and blue together = #f/red/blue
when page is opened, check url and apply filters

Thank you for help Tomas

    .filterelements {
      display: block;
      width: 210px;
    }

    .red,
    .green,
    .blue,
    .redgreen,
    .redblue {
      width: 50px;
      height: 50px;
      float: left;
      margin: 10px;
    }

    .red {
      background: #ff2600;
    }

    .green {
      background: #a5de00;
    }

    .blue {
      background: #0087ff;
    }

    .redgreen {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
    }

    .redblue {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
    }





  
  



  
  red
  green
  blue

user_2943218 · Answer

You could do it like this:

$('.selector button').click(function() {
  $('.selector input').prop("checked",true).trigger("change");
});

$('.selector input').change(function() {
  $('.filterelements div').hide();
  $('.selector input:checked').each(function() {
      $('.filterelements div.' + $(this).val()).show();
  })
});

Note

I've wrapped your button and input inside a div with the class selector, Also I've separated classes like class="redblue" into class="red blue"

Demo

$('.selector button').click(function() {
  $('.selector input').prop("checked", true).trigger("change");
});

$('.selector input').change(function() {
  $('.filterelements div').hide();
  $('.selector input:checked').each(function() {
    $('.filterelements div.' + $(this).val()).show();
  })

  if ($('.selector input:checked').length == 0) {
    $('.filterelements div').show();
  }
});

.filterelements {
  display: block;
  width: 210px;
}

.red,
.green,
.blue,
.redgreen,
.redblue {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px;
}

.red {
  background: #ff2600;
}

.green {
  background: #a5de00;
}

.blue {
  background: #0087ff;
}

.redgreen {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
}

.redblue {
  background: rgb(255, 38, 0);
  background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
}






  
  



  
    
    red
    green
    blue

user_6469645 · Answer

First, on button click checked all checkbox using .prop("checked", true) and then on change on of checkbox check of checkbox checked length is more than 0 then hide all and display only those who is checked else show all.

$('button[name="all"]').click(function() {
  $('input[type="checkbox"]').prop("checked",true).trigger("change");
});

$('input[type="checkbox"]').on('change',function(){
  $('.filterelements div').hide();
  if( $('input[type="checkbox"]:checked').length > 0 ){
    $('input[type="checkbox"]:checked').each(function(){
        $('.'+$(this).val()).show();
    });
  }else{
    $('.filterelements div').show();
  }
})

.filterelements {
      display: block;
      width: 210px;
    }

    .red,
    .green,
    .blue,
    .redgreen,
    .redblue {
      width: 50px;
      height: 50px;
      float: left;
      margin: 10px;
    }

    .red {
      background: #ff2600;
    }

    .green {
      background: #a5de00;
    }

    .blue {
      background: #0087ff;
    }

    .redgreen {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(165, 222, 0, 1) 100%);
    }

    .redblue {
      background: rgb(255, 38, 0);
      background: linear-gradient(90deg, rgba(255, 38, 0, 1) 0%, rgba(0, 135, 255, 1) 100%);
    }






  
  



  
  red
  green
  blue

Filter elements and change URL with JS/jQuery

2 Answers