Javascript 使用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>

我篡改了密码

---

我提前向大家表示感谢：-

我已经获得了第一部分的帮助，现在我已经成功地获得了并列列出的两个产品

这是我的建议

如果我能修改代码将变量粘贴到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>

--更新--

---

我不再需要考虑URL的第二部分。因此，我结束这个问题。

请在此处发布相关代码。另外，请不要通过在帖子中添加blockquote来规避关于JSFIDLE链接的规则。你的问题比任何问题标签都更与CSS相关谢谢-我已经更新了标签。

body {
    font-family:'Arial';
    color:#646464;
}
.continents-wrap {
    float:left;
    width:20%;
    margin:0 5% 0 0;
    padding:0;
}
.flowers-wrap {
    float:left;
    width:20%;
    margin:0 5% 0 0;
    padding:0;
    position:relative;    
}
.flowers {
    float:left;
    width:600px;
    border:1px solid #FF00FF;
}
.flowers div {
    float:left;
    width:300px;
    height:68px;
    line-height:68px;
    padding:0 10px;
    background:#eee;
    margin:0;
    position:relative;
    border:1px solid #00FF00;
    box-sizing: border-box;
}

<label style="font-size:12px;">    <input type="radio" onclick="window.location='?page=product-list&katsel=1'"> Vis alle</label><br/>
<label style="font-size:12px;">    <input type="radio" onclick="window.location='?page=product-list&katsel=2'"> Vis noget</label><br/>


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