使用 Ajax 中复选框中的多个值管理 url 参数

Question

我能够根据复选框选择向 URL 添加/删除参数。

现在，如果选中多个复选框，我希望特定 URL 参数具有多个值。

我改编了之前的答案片段以反映我陷入困境的地方。

选择多个复选框时，会添加参数和值，而我只需要添加值。

我怎样才能得到http://example.com/?param=foo,bar而不是http://example.com/?param=foo&param=bar当我检查foo和bar？

const url = 'http://example.com' // demo version

// const url = location.href - live version

const urlObj = new URL(url);

const params = urlObj.searchParams

const $checks = $(':checkbox')

// on page load check the ones that exist un url

params.forEach((val, key) => $checks.filter('[name="' + key + '"]').prop('checked', true));        

$checks.change(function(){

    // append when checkbox gets checked and delete when unchecked

    if(this.checked){

                //here I check if there is already the parameter in url

    if (url.indexOf(this.value) > -1) {

        //and try to append only this name with a comma as separator from previous one

        params.append(',',this.name )

    } else {

      params.append(this.value,this.name )

    }

    }else{

        params.delete(this.name);       

    }

    // do your page load with location.href = urlObj.href

     console.clear()

     console.log(urlObj.href);

})

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

<label>Foo <input type="checkbox" name="foo" value="param"/></label> 

<label>Bar <input type="checkbox" name="bar" value="param"/></label>

<label>Zzz <input type="checkbox" name="zzz" value="param"/></label>

Answer 1

URLSearchParams有一个has方法，您可以使用它来检查是否设置了参数。另外，append 方法的第一部分是“key”。将其设置为“，”不会添加到现有值上。您需要获取现有值并将其附加到其上。然后用新值覆盖旧值。至于你的删除。您首先需要获取当前值。然后删除未选中的部分。最后您可以覆盖当前值或完全删除它。请注意，逗号会变成“%2C”，这基本上是 ASCII 变体，const url = "http://example.com"; // demo version// const url = location.href - live versionconst urlObj = new URL(url);const params = urlObj.searchParams;const $checks = $(":checkbox");const seperator = ",";// on page load check the ones that exist un urlparams.forEach((val, key) =>  $checks.filter('[name="' + key + '"]').prop("checked", true));$checks.change(function () {  // append when checkbox gets checked and delete when unchecked  if (this.checked) {    //here I check if there is already the parameter in url    if (params.has(this.value)) {      // get saved value      const current = params.get(this.value);      // combine saved and new value      const extra = current + seperator + this.name;      // overwrite old value      params.set(this.value, extra);    } else {      params.append(this.value, this.name);    }  } else {    //  get saved value    const current = params.get(this.value);    // split them by ","    const parts = current.split(seperator);    // get index of item to remove    const index = parts.indexOf(this.name);    // remove item    parts.splice(index, 1);        if(parts.length === 0) {      // if nothing is left delete the parameter      params.delete(this.value);    }else{      // overwrite with the updated value      params.set(this.value, parts.join(seperator));    }  }  // do your page load with location.href = urlObj.href  //console.clear()  console.log(urlObj.href);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><label>Foo <input type="checkbox" name="foo" value="param"/></label> <label>Bar <input type="checkbox" name="bar" value="param"/></label><label>Zzz <input type="checkbox" name="zzz" value="param"/></label>