从表单获取复选框值并使用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

您可以使用JQuery serialize（）函数。 然后，您可以执行以下操作：

 function onSubmit( form ){ var data = JSON.stringify( $(form).serializeArray() ); // <----------- console.log( data ); return false; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form onsubmit='return onSubmit(this)'> <input name='user' placeholder='user'><br> <input name='password' type='password' placeholder='password'><br> <input type='checkbox' name='remember-me'> <br /> <button type='submit'>Try</button> </form> 

Answer 2

使用复选框的.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>