提交时获取复选框值

Question

假设我有一个带有几个复选框的表单。每当我提交该表单时，我都希望打印所选复选框的所有值。

<form>
<input type="checkbox" id="product1" name="product1" value="12">
<input type="checkbox" id="product2" name="product1" value="13">
<input type="checkbox" id="product3" name="product1" value="14">
<button type="submit">Subscribe</button>
</form>

用例如下：

我有一个网店，我想一次将多个产品添加到我的购物车。

我有一个基本的链接，看起来像：test.com/addtocart？在问号之后，我需要添加以逗号分隔的复选框的值。例如，如果选择了值 12 和 14，它应该生成这样的链接：test.com/addtocart?12,14

Answer 1

这是一种方法。如果选中了复选框，您可以遍历复选框并打印值。

const form = document.querySelector('form');

form.addEventListener('submit', e => {
  e.preventDefault();

  const values = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
    .map(item => item.value)
    .join(',');

  console.log(`test.com/addtocart?${values}`);
});

<form>
  <input type="checkbox" id="product1" name="product1" value="12">
  <input type="checkbox" id="product1" name="product1" value="13">
  <input type="checkbox" id="product1" name="product1" value="14">
  <button type="submit">Subscribe</button>
</form>