Updating URL window history based on multi groups of checkboxes

How can I update the parameters of URL(window.history) based on multi groups of check-boxes if any of group been checked?

Like (if only the make selected)

www.mydomain/filters?make=toyota,honda

or if make and model is selected

www.mydomain/filters?make=toyota,honda&model=crv,cx5

$(document).ready(function() {
  
  $("input:checkbox[name='make']").change(function() {
    var makechecks = [];
    $("input[type='checkbox']:checked").each(function() {
      makechecks[makechecks.length] = this.value;            
    });
      console.log( makechecks.join() );
  });
  
  
  $("input:checkbox[name='model']").change(function() {
    var modelchecks = [];
    $("input[type='checkbox']:checked").each(function() {
      modelchecks[modelchecks.length] = this.value;            
    });
      console.log( modelchecks.join() );
  });
  
  
  $("input:checkbox[name='year']").change(function() {
    var yearchecks = [];
    $("input[type='checkbox']:checked").each(function() {
      yearchecks[yearchecks.length] = this.value;            
    });
      console.log( yearchecks.join() );
  });
  
  function UpdateURL(){
     window.history.pushState( {} , '', '');
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="make">
    <p>Toyota :<input type="checkbox" name="make" value="toyota"></p>
    <p>Honda : <input type="checkbox" name="make" value="honda"></p>
    <p>Mazda : <input type="checkbox" name="make" value="mazda"></p>
  </div>
  
  <div id="model">
    <p>CRV  :<input type="checkbox" name="model" value="crv"></p>
    <p>RAV4 :<input type="checkbox" name="model" value="rav4"></p>
    <p>CX5  :<input type="checkbox" name="model" value="cx5"></p>
  </div>
  
  <div id="year">
    <p>2020 :<input type="checkbox" name="year" value="2020"></p>
    <p>2019 :<input type="checkbox" name="year" value="2019"></p>
    <p>2018 :<input type="checkbox" name="year" value="2018"></p>
  </div>

Answer

Something like this?

const createURL = () => {
  let urlSearch = new URLSearchParams()
  let make  = $("[name=make]:checked" ).map((_,chk) => chk.value).get()
  let model = $("[name=model]:checked").map((_,chk) => chk.value).get()
  let year  = $("[name=year]:checked" ).map((_,chk) => chk.value).get()
  if (make.length  > 0) urlSearch.set("make",  make.join(","))
  if (model.length > 0) urlSearch.set("model", model.join(","))
  if (year.length  > 0) urlSearch.set("year",  year.join(","))
  const srch = urlSearch.toString();
  console.log(srch);
  // history.pushState({}, "Results for `Cars`", srch ? "?"+srch : "");
};
$(function() {
  $("input:checkbox").on("change", createURL)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="make">
  <p>Toyota :<input type="checkbox" name="make" value="toyota"></p>
  <p>Honda : <input type="checkbox" name="make" value="honda"></p>
  <p>Mazda : <input type="checkbox" name="make" value="mazda"></p>
</div>

<div id="model">
  <p>CRV :<input type="checkbox" name="model" value="crv"></p>
  <p>RAV4 :<input type="checkbox" name="model" value="rav4"></p>
  <p>CX5 :<input type="checkbox" name="model" value="cx5"></p>
</div>

<div id="year">
  <p>2020 :<input type="checkbox" name="year" value="2020"></p>
  <p>2019 :<input type="checkbox" name="year" value="2019"></p>
  <p>2018 :<input type="checkbox" name="year" value="2018"></p>
</div>

Advertisement

Answer