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

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

您可以从查询映射中找到项目，您可以通过$(this).prop('name') + '=' + $(this).val()此逻辑生成每个项目的键/值对来比较它们，并查看由&拼接的所有查询参数创建的现有查询数组/p>

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 转换为字符串，然后将其传递给函数。

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;
});