Question

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

let configuration = URLSessionConfiguration.default
configuration.httpMaximumConnectionsPerHost = 10 // change the number according to need

用例如下：

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

我有一个基本的链接，看起来像：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>

Answer 2

vanilla js解决方案可能就是这样。

＆＃13;

$ sudo apt-get --purge autoremove exo-file-manager

＆＃13;

document.querySelector("button").addEventListener('click', function(e){
  e.preventDefault();
  var form = document.querySelector("form");
  Array.from(form.querySelectorAll("input")).forEach(function(inp){
    if(inp.checked === true) { console.log(inp.value);  } 
  });
});

＆＃13;

Answer 3

最简单的解决方案也会返回正确的链接。

var form = document.querySelector('form');
var selections = '';
var link = 'https://example.com?';
form.addEventListener('submit', function(e) {
  e.preventDefault();

  document.querySelectorAll('input[type=checkbox]')
    .forEach(function(item) {
      if (item.checked) {
        selections = selections + item.value + ',';
      }
    })
link = link + selections;
console.log(link);
});

<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>

Answer 4

作为31piy的答案副本，这里有一个原生的js

＆＃13;

function $(selector) {
  return document.querySelector(selector);
}

function $$(selector) {
  return document.querySelectorAll(selector);
}

$('form').addEventListener('submit', function(event) {
  event.preventDefault();
  
  $$('input[type=checkbox]:checked').forEach($cbox => {
    console.log($cbox.value);
  });
  
  return false;
});

＆＃13;

<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>

＆＃13;

Answer 5

我的纯javascript示例适用于cross-bowser和旧浏览器。每次选择/取消选择项时，它都会更改表单action（但如果您有其他代码发出请求，则可以将链接保留为字符串）。这样，当您来到submit表单时，网址将始终与所选项目保持同步：

＆＃13;

function getCheckedOptions(form) {
  var inputs = form.children;  // get all inputs in the form
  var products = [];           // will store the selected products values

  // cycle through all inputs
  for( var i = 0; i < inputs.length; i++ ){
    if( inputs[i].checked ){
      // only record the checked inputs
      products.push(inputs[i].value);
    }
  }

  // update the `action` of the form - alternatively you could just store it as a string to use somewhere else in your code if you're using AJAX or something
  form.action = "http://test.com/addtocart?"+products.join(",");
}

＆＃13;

<form onchange="getCheckedOptions(this);">
  <input type="checkbox" id="product1" name="product1" value="12">
  <input type="checkbox" id="product2" name="product2" value="13">
  <input type="checkbox" id="product3" name="product3" value="14">
  <button type="submit">Subscribe</button>
</form>

＆＃13;

获取提交时的复选框值

5 个答案: