修复 JS 代码：将复选框中的多个值附加到 url

Question

我发现这段代码用选中的复选框值替换了链接文本（=“显示”）。现在，我正在寻找将选中/未选中值附加/删除到链接 url 本身的代码。

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... 并且它与 attribute selector 一起使用，我会在 href 更改之前将元素保存在变量中。 href "base" 值本身也是如此。因为在第二次点击时，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>