установите флажок, если имя и значение совпадают с полем флажка ввода

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

Из-за того, что дубликаты имен параметров не позволяют использовать 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 2

Вы можете найти элементы на карте запросов, которые вы можете сравнить, сгенерировав пару ключ / значение каждого элемента с помощью $(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 3

Должно работать именно то, что вам нужно:

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

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

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

Измените 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 не принесет вреда.