使用jQuery筛选复选框-保留URL中的选择

我曾使用过一篇较早的文章，并成功地将其实现为带过滤的二维产品查看器。

因为我真的很感谢开发和分享这些代码的人。

我希望它是可能的选择是保留当从一个产品点击回来?当复选框被选中时，也许可以将选择显示为URL中的变量，这样您就可以单击回到相同的选择?

另一件事，我尝试添加一系列单选按钮，这与实际的复选框或jQuery无关，但由于某种原因，当单击单选按钮时，jQuery会做出反应。有没有办法"禁用"这个?即使单选按钮没有受到影响，当使用现有的复选框进行过滤时，它也会错误地将应该显示的所有内容隐藏起来。

    <div class="flowers-wrap">
    <p style="font-size:12px;"><strong>Filter flowers by colour:</strong>
    </p>
    <form>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="1" />Kartofler</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="2" />Gulerødder</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="3" />Løg</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="4" />Agurker</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="5" />Peber</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="6" />Rødbeder</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="7" />Selleri</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="8" />Andre</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="9" />Salat</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="12" />Emballage</label>
        <br>
    </form>
    <p style="font-size:12px;"><strong>Filter flowers by size:</strong>
    </p>
    <form>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t10" />Frasortering - sten/grus</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t11" />Vaske</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t12" />Polere</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t13" />Tørre</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t14" />Sortering</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t15" />Skrælle</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t16" />Skære</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t17" />Transport</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t18" />Veje/tælle</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t19" />Pakke/fylde</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t21" />Storkøkken</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t22" />Palletering</label>
        <br>
    </form>
</div>
<div class="flowers">
    <div class="flower" data-id="3-Dimensionel skiveskærermaskine" data-category="8 5 3 2 1 t16 ">3-Dimensionel skiveskærermaskine</div>
    <div class="flower" data-id="3D-skærer til Sticks og tern" data-category="9 8 7 6 5 4 3 2 1 t16 ">3D-skærer til Sticks og tern</div>
    <div class="flower" data-id="Automatisk gulerodsskærer og slicer" data-category="2 t16 ">Automatisk gulerodsskærer og slicer</div>
    <div class="flower" data-id="Automatisk gulerodsskærer og slicer" data-category="2 t16 ">Automatisk gulerodsskærer og slicer</div>
    <div class="flower" data-id="Automatisk kassefylder" data-category="9 8 7 6 5 4 3 2 1 t17 t19 ">Automatisk kassefylder</div>
    <div class="flower" data-id="Automatisk løgskræller USM-100A" data-category="3 t15 ">Automatisk løgskræller USM-100A</div>
    <div class="flower" data-id="Automatisk Pallelaster" data-category="12 t22 ">Automatisk Pallelaster</div>
    <div class="flower" data-id="Automatisk strapmaskine incl. påsætning af hjørnebeskytter" data-category="12 t22 ">Automatisk strapmaskine incl. påsætning af hjørnebeskytter</div>
    <div class="flower" data-id="Automatisk Vejemaskine" data-category="3 1 t18 ">Automatisk Vejemaskine</div>
    <div class="flower" data-id="Basisenhed for manuel udskæring" data-category="9 8 7 6 5 4 3 2 1 t16 ">Basisenhed</div>
            </div>

       var byProperty = [],
       byColor = [];
   $("input[name=fl-colour]").on("change", function () {
       if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
       else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
   });
   $("input[name=fl-size]").on("change", function () {
       if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']");
       else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']");
   });

   $("input").on("change", function () {
       var str = "Include items 'n";
       var selector = '',
           cselector = '',
           nselector = '';
       var $lis = $('.flowers > div'),
           $checked = $('input:checked');
       if ($checked.length) {
           if (byProperty.length) {
               if (str == "Include items 'n") {
                   str += "    " + "with (" + byProperty.join(',') + ")'n";
                   $($('input[name=fl-colour]:checked')).each(function (index, byProperty) {
                       if (selector === '') {
                           selector += "[data-category~='" + byProperty.id + "']";
                       } else {
                           selector += ",[data-category~='" + byProperty.id + "']";
                       }
                   });
               } else {
                   str += "    AND " + "with (" + byProperty.join(' OR ') + ")'n";
                   $($('input[name=fl-size]:checked')).each(function (index, byProperty) {
                       selector += "[data-category~='" + byProperty.id + "']";
                   });
               }
           }
           if (byColor.length) {
               if (str == "Include items 'n") {
                   str += "    " + "with (" + byColor.join(' OR ') + ")'n";
                   $($('input[name=fl-size]:checked')).each(function (index, byColor) {
                       if (selector === '') {
                           selector += "[data-category~='" + byColor.id + "']";
                       } else {
                           selector += ",[data-category~='" + byColor.id + "']";
                       }
                   });
               } else {
                   str += "    AND " + "with (" + byColor.join(' OR ') + ")'n";
                   $($('input[name=fl-size]:checked')).each(function (index, byColor) {
                       if (cselector === '') {
                           cselector += "[data-category~='" + byColor.id + "']";
                       } else {
                           cselector += ",[data-category~='" + byColor.id + "']";
                       }
                   });
               }
           }

           $lis.hide();
           console.log(selector);
           console.log(cselector);
           console.log(nselector);
           if (cselector === '' && nselector === '') {
               $('.flowers > div').filter(selector).show();
           } else if (cselector === '') {
               $('.flowers > div').filter(selector).filter(nselector).show();
           } else if (nselector === '') {
               $('.flowers > div').filter(selector).filter(cselector).show();
           } else {
               $('.flowers > div').filter(selector).filter(cselector).filter(nselector).show();
           }
       } else {
           $lis.show();
       }
       $("#result").html(str);
    });
    function removeA(arr) {
       var what, a = arguments,
           L = a.length,
           ax;
       while (L > 1 && arr.length) {
           what = a[--L];
           while ((ax = arr.indexOf(what)) !== -1) {
               arr.splice(ax, 1);
           }
       }
       return arr;
    }

我在这里修改了代码。

提前感谢大家:-)