javascript - 使用 JavaScript 从表单获取复选框值并添加到 JSON 字符串

Question

尝试提取表单值并通过 JSON 字符串将其放入 localStorage 中。此代码适用于除复选框值之外的所有内容。我如何获取复选框值？请并谢谢!

<form id="myForm">
<input type="submit" name="submit" value="submitOrder"> 
</form>

const userOrder = {};

function getValues(e) {
  // turn form elements object into an array
  var elements = Array.prototype.slice.call(e.target.elements);

  // go over the array storing input name & value pairs
  elements.forEach((el) => {
    if(el.type !== "submit" && el.type !=="button") {
      userOrder[el.name] = el.value;
    }
  });

  // finally save to localStorage
  localStorage.setItem('userOrder', JSON.stringify(userOrder));
}  

document.getElementById("myForm").addEventListener("submit", getValues);

console.log(localStorage.getItem('userOrder'));

Answer 1

使用复选框的 .checked 属性来判断它是否被选中

const userOrder = {};
function getValues(e) {
  e.preventDefault();
  // turn form elements object into an array
  //you can also use Array.from(e.target.elements)
  var elements = Array.prototype.slice.call(e.target.elements);
  console.log(elements);
  // go over the array storing input name & value pairs
  elements.forEach((el) => {
    if(el.type == "checkbox") {
      userOrder[el.name] = el.checked;
    }
  });
  console.log(userOrder);
  // finally save to localStorage
  //localStorage.setItem('userOrder', JSON.stringify(userOrder));
}  

document.getElementById("myForm").addEventListener("submit", getValues);

//console.log(localStorage.getItem('userOrder'));

<form id="myForm">
<input type="checkbox" name="checkbox-0"> 
<input type="checkbox" name="checkbox-1"> 
<input type="checkbox" name="checkbox-2"> 
<input type="submit" name="submit" value="submitOrder"> 
</form>