javascript - 如何读取复选框和单选按钮的值

Question

我有下面的代码，它读取表单元素并将它们转换为 JSON，它适用于大多数元素，但两者都无法正常工作：复选框和单选按钮选择，我该如何解决？

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
  event.preventDefault();
  console.log("hi");
  const data = formToJSON(form.elements);
  console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
  console.log(jdata);

  (async() => {
    const rawResponse = await fetch('/', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: jdata
    });
    const content = await rawResponse.json();

    console.log(content);
  })();
};
const form = document.forms['myForm']; // document.getElementsByClassName('contact-form')[0];
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
  <label>Checkbox:
        <input type="checkbox" name="checkbox">
    </label><br /><br />

  <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

  <label>Password:
        <input name="password" type="password" />
    </label>
  <br /><br />

  <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
  <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
  <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
  </label>
  <br /><br />

  <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
  <br /><br />

  <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
  <br /><br />

  <label>Submit:
        <input type="submit" value="Login">
    </label>
  <br /><br />
</form>

更新

根据收到的评论，我解决了radio以下问题：

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  console.log(element);
  if(element.type == "radio") {
    if(element.checked) data[element.name] = element.value;
  } else data[element.name] = element.value;

  return data;

}, {});

但是如何解决其中之一checkbox

标签： javascripthtml

Answer 1

添加 switch 语句并检查元素类型。对复选框使用选中的属性

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  console.log(element);
  switch (element.type) {
    case "radio": if(element.checked) data[element.name] = element.value;
     break;
    case "checkbox" : data[element.name] = element.checked;
     break;
    case "number" : data[element.name] = Number(element.value);
     break;
    default: data[element.name] = element.value;
}
  return data;

}, {});