如果名称和值与输入复选框字段匹配，请选中复选框

Question

.html

 var url = "http: //127.0.0.1:8000/search/?name=san&language=1&cast=1&language=2&cast=3"; existingUrl(var); function existingUrl(fullUrl) { $('.language').each(function() { var hasValue = fullUrl.indexOf($(this).val()); if (hasValue.= -1) this;checked = true; }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="get"> <input type="text" name="name" id="name" hidden> language <input type="checkbox" name="language" class="language" id="1" value="1"> cast <input type="checkbox" name="cast" class="cast" id="2" value="1"> language <input type="checkbox" name="language" class="language" id="3" value="2"> cast <input type="checkbox" name="cast" class="cast" id="4" value="3"> <input type="submit" value="submit"> </form>

如果所有复选框输入值都具有不同的值，则它工作正常。如果我们尝试使用具有相同值的不同名称，它会检查具有该值的所有复选框。

Answer 1

您可以从查询的 map 中找到项目，您可以通过$(this).prop('name') + '=' + $(this).val()这个逻辑和查看由&拼接的所有查询参数创建的现有查询数组

 var url = 'http://127.0.0.1:8000/search/?name=san&language=1&cast=1&language=2&cast=3'; existingUrl(url.substring(url.indexOf('?') + 1)); function existingUrl(query) { var urlparts = query.split('&'); $('input[type=checkbox]').each(function() { this.checked = urlparts.indexOf($(this).prop('name') + '=' + $(this).val()); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="get"> <input type="text" name="name" id="name" hidden> language <input type="checkbox" name="language" class="language" id="1" value="1"> cast <input type="checkbox" name="cast" class="cast" id="2" value="1"> language <input type="checkbox" name="language" class="language" id="3" value="2"> cast <input type="checkbox" name="cast" class="cast" id="4" value="3"> <input type="submit" value="submit"> </form>

Answer 2

由于重复的参数名称实际上不允许您使用URLSearchParams ，我将拆分&和=以生成键/值对。 对于每一个，您都可以使用属性选择器来定位和检查相应的项目。

 const url = 'http://127.0.0.1:8000/search/?name=&language=1&cast=3'; function existingUrl(fullUrl) { let query = fullUrl.split("?")[1]; //?language=1&cast=3 query.split("&").forEach(param => { //split on "&" let [name, value] = param.split("="); //split on "=" to get name/value pairs let valueSelector = value? `[value=${value}]`: ''; //account for null value $(`input[name=${name}]${valueSelector}`).prop("checked", true); //check corresponding input }); } existingUrl(url);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form method="get"> <input type="text" name="name" id="name" hidden> language <input type="checkbox" name="language" class="language" id="1" value="1"> cast <input type="checkbox" name="cast" class="cast" id="2" value="1"> language <input type="checkbox" name="language" class="language" id="3" value="2"> cast <input type="checkbox" name="cast" class="cast" id="4" value="3"> <input type="submit" value="submit"> </form>

Answer 3

将 val() 更改为 id

function existingUrl(fullUrl) {
  $('.language').each(function() {
    var hasValue = fullUrl.indexOf($(this).attr('id'));
    if (hasValue != -1)
      this.checked = true;

  });
}

注意：将indexOf与strings一起使用是一种不好的做法，假设您在 url 中有 language=111 ，那么这也适用于语言 1 和 11，这不是预期的。 最好的方法是在一个数组中获取 url 参数值，然后使用indexOf不会有任何危害。

Answer 4

将 url 转换为字符串，然后将其传递给 function。

var url = 'http: //127.0.0.1:8000/search/?name=san&language=1&cast=1&language=2&cast=3';
existingUrl(url);

Answer 5

应该完全符合您的需要：

var url = new URL(url_string);
var languageParams = url.searchParams.getAll("language");

$('.language').each(function() {
      this.checked = languageParams.indexOf($(this).val()) != -1;
});