Исправить код JS: добавить несколько значений из флажков в URL

Question

Я нашел этот код, который заменил текст ссылки (= "Показать") на отмеченные значения флажков.Теперь я ищу код, который добавляет / удаляет отмеченные / непроверенные значения в самой ссылке.

function calculate() {
  var arr = $.map($('input:checkbox:checked'), function(e, i) {
    return +e.value;
  });
  $("[href$='feature=']").text('the checked values are: ' + arr.join(','));
}

calculate();
$('div').delegate('input:checkbox', 'click', calculate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" value="Teamsport" />
  <input type="checkbox" name="options[]" value="Individual sport" />
</div>

<div><a href="/best/?price=123&amp;feature=">Show</a></div>

<a href="/best/?price=123&amp;feature=Teamsport">Show</a>

Большое спасибо за вашу помощь, ребята!

Answer 1

Я бы использовал цикл .each() вместо $.map() ...

Кроме того, поскольку вы хотите изменить href ..И что он используется с селектором атрибута , я бы сохранил элемент в переменной до изменения href.И то же самое для href самого «базового» значения.Поскольку при втором щелчке href не заканчивается feature=.

Итак, вот рабочая демонстрация:

function calculate() {
  var arr = [];
  $('input:checkbox:checked').each(function(i,v) {
    arr.push(v.value);
  });
  
  // The array in console
  console.log(arr);
  
  // Join it has a string
  var arr_string = arr.join(",");  

  // Use the string in the link's text AND the href
  link
    .text('the checked values are: ' + arr_string)
    .attr('href', link_href_base + arr_string);
  
  // The link's href in console
  console.log(link.attr("href"));
}

// Variables that won't change
var link = $("[href$='feature=']");
var link_href_base = link.attr("href");

calculate();
$('div').delegate('input:checkbox', 'click', calculate);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="options[]" value="Teamsport" />
  <input type="checkbox" name="options[]" value="Individual sport" />
</div>

<div><a href="/best/?price=123&amp;feature=">Show</a></div>