如果选中复选框，则在URL中添加

Question

我有一个页面上有复选框的下拉表单一旦用户选择那里的过滤器，我需要添加在URL中选择的复选框的值，以便它在CMS中得到完美的搜索

例如，一个好的URL应该是这样的。

https://www.zyris.io/sort-and-filter?interests-2=Animals%7CArt&ages=Teens%20(13%20to%2017)&days-2=Today

我写了它的代码。但它也会将未选中的变量添加为null，因此无法使用该URL进行搜索。

它的任何解决方案，所以我可以只添加那些被选择的变量。

以下是我的JavaScript代码：

document.getElementById("search").onclick = function formJS() {
    var a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, url = null;
    if ($('#Animal').is(":checked")) {
        a = "Animals";
        console.log("Animals is checked");
    }


    if ($('#Ar').is(":checked")) {
        b = "%7CArt";
        console.log("Art is checked");
    }


    if ($('#Histor').is(":checked")) {
        c = "%7CHistory";
        console.log("History is checked");
    }


    if ($('#Scienc').is(":checked")) {
        d = "%7CScience";
        console.log("Science is checked");
    }


    if ($('#Technolog').is(":checked")) {
        e = "%7CTechnology";
        console.log("Technolog is checked");
    }


    if ($('#Today2').is(":checked")) {
        f = "Today";
        console.log("Today is checked");
    }


    if ($('#Next7Days2').is(":checked")) {
        g = "%7CNext%207%20Days";
        console.log("Next 7 Days is checked");
    }


    if ($('#ThisMonth2').is(":checked")) {
        h = "%7CThis%20Month";
        console.log("This Month is checked");
    }


    if ($('#NextMonth2').is(":checked")) {
        i = "%7CNext%20Month";
        console.log("Next Month is checked");
    }


    if ($('#Morning').is(":checked")) {
        j = "%7CMorning";
        console.log("Morning is checked");
    }


    if ($('#Afternoon').is(":checked")) {
        k = "%7CAfternoon";
        console.log("Afternoon is checked");
    }

    if ($('#Evening').is(":checked")) {
        l = "%7CEvening";
        console.log("Evening is checked");
    }


    if ($('#firstPrice').is(":checked")) {
        m = "%240%20—%20%2420";
        console.log("0 — 20 is checked");
    }


    if ($('#secondPrice').is(":checked")) {
        n = "%7C%2420%20—%20%2450";
        console.log("$20 — $50 is checked");
    }


    if ($('#thirdPrice').is(":checked")) {
        o = "%7C%2450%2B";
        console.log("$50+ is checked");
    }


    if ($('#Kids').is(":checked")) {
        p = "%7CKids%20(Up%20to%207)";
        console.log("Kids (Up to 7) is checked");
    }


    if ($('#Tweens').is(":checked")) {
        q = "%7CTweens%20(8%20to%2012)";
        console.log("Tweens (8 to 12) is checked");
    }


    if ($('#Teens').is(":checked")) {
        r = "%7CTeens%20(13%20to%2017)";
        console.log("Teens (13 to 17) is checked");
    }



    if ($('#Adults').is(":checked")) {
        s = "Adults%20(18%2B)";
        console.log("Adults (18+) is checked");
    }


    url = 'https://www.zyris.io/sort-and-filter?ages='
    e + f + g + h '&interests-2=' + a + b + c + d '&prices-2='
    i + j + k + l '&times= &days-2='
    m + n + o + p '                                       
    setTimeout(function() {
        window.location.href = url;
    }, 2000);



}

Answer 1

使用一个数组而不是许多不同的变量。然后，您可以在创建URL时加入数组。

let interests = [];
if ($('#Animal').is(":checked")) {
    interests.push("Animals");
    console.log("Animals is checked");
}
if ($('#Ar').is(":checked")) {
    interests.push("Art");
    console.log("Art is checked");
}
// and so on
let times = [];
if ($('#Today2').is(":checked")) {
    times.push("Today");
    console.log("Today is checked");
}
// and so on, similarly for prices and ages

let interests_param = encodeURIComponent(interests.join('|'));
let times_param = encodeURIComponent(times.join('|'));
let prices_param = encodeURIComponent(prices.join('|'));
let ages_param = encodeURIComponent(ages.join('|'));

let url = `https://www.zyris.io/sort-and-filter?ages=${ages_param}&prices-2=${prices_param}&times=${times_param}&interests-2=${interests_param}`;

Answer 2

做了几个样本，剩下的就得填了。这段代码应该适用于任意数量的复选框。除非添加了新的“类别”，否则不需要更改代码。

​

$(document).ready(()=> {
  $("#search").click(()=> {
    const interests = $(".I:checked");
    let I = interests.length>0 ? "interests=" : "";
    for (let i=0; i<interests.length; i++) {
        I += interests[i].getAttribute("V") + "|";
      };
    I = I.slice(0, -1); // to prevent trailing |
    
    const ages = $(".A:checked");
    let A = ages.length>0 ? "ages=" : "";
    for (let i=0; i<ages.length; i++) {
        A += ages[i].getAttribute("V") + "|";
      };
    A = A.slice(0, -1);
    
    // Repeat above for categories P & T for prices and times
    
    let url = "https://ww.zyris.io/sort-and-filter?";
    let path = I;
    path += path ? A ? "&" + A : "" : A; // to prevent leading/trailing &'s
    $("#raw").text(path);
    $("#url").text(encodeURI(url + path));
  })
})

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

<p>Interests:
  <input type="checkbox" id="Animal" V="Animals" class="I" />
  <label for="Animal">Animals</label>
  &nbsp;
  <input type="checkbox" id="Art" V="Art" class="I" />
  <label for="Art">Art</label>
  &nbsp;
  <input type="checkbox" id="History" V="History" class="I" />
  <label for="History">History</label>
</p>

<p>Ages: 
  <input type="checkbox" id="Today" V="Today" class="A" />
  <label for="Today">Today</label>
  &nbsp;
  <input type="checkbox" id="Next7Days" V="Next 7 Days" class="A" />
  <label for="Next7Days">Next 7 Days</label>
  &nbsp;
  <input type="checkbox" id="ThisMonth" V="This Month" class="A" />
  <label for="ThisMonth">This Month</label>
</p>
<p>
  <button id="search">Search</button><br/>
  Raw path: <span id="raw"></span><br/>
  Url: <span id="url"></span>
</p>

​

我使用了一个任意属性V来保存要包含在查询字符串中的值。

需要一些边界检查来防止出现像https://x.com?&ages=...或拖尾|这样的情况，即使它们在大多数情况下可能是有效的。