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

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

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;
}, {});