如何让HTML表单复选框返回布尔值并将pages转为数字类型

给你两个最简单的实现方式，直接搞定类型转换问题：

方案一：直接获取DOM元素值（新手友好，直观易懂） #

这种方式不需要依赖FormData的复杂处理，直接从表单元素拿对应类型的值：

修改后的HTML #

<body>
    <form>
        <label for="title">Title:</label>
        <input id="title" name="title" type="text">

        <label for="author">Author:</label>
        <input id="author" name="author" type="text">

        <label for="pages">Pages:</label>
        <input id="pages" name="pages" type="number"> <!-- 改成number类型，限制用户输入非数字 -->

        <div class="input-group">
            <label for="isRead">Check if read:</label>
            <input id="isRead" name="isRead" type="checkbox"> <!-- 删除多余的隐藏输入框 -->
        </div>

        <button id="submit">Submit</button>
    </form>
</body>

修改后的JS #

function handleSubmit(event) {
    event.preventDefault();
    
    // 逐个获取表单值并处理类型
    const book = {
        title: document.getElementById('title').value,
        author: document.getElementById('author').value,
        pages: Number(document.getElementById('pages').value), // 直接转成数字类型
        isRead: document.getElementById('isRead').checked // 原生布尔值，无需额外转换
    };

    console.log(book);
    // 这里把book存入你的数组即可
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

方案二：保留FormData处理逻辑 #

如果你习惯用FormData批量收集数据，也可以在生成对象后手动转换类型：

调整后的HTML（仅修改复选框部分） #

<div class="input-group">
    <label for="isRead">Check if read:</label>
    <input id="isRead" name="isRead" type="checkbox"> <!-- 删除隐藏输入框 -->
</div>

修改后的JS #

function handleSubmit(event) {
    event.preventDefault();
    
    const data = new FormData(event.target);
    const book = Object.fromEntries(data.entries());

    // 转换页数为数字类型
    book.pages = Number(book.pages);
    // 复选框选中时会有值，未选中则不存在，用!!转成布尔值
    book.isRead = !!book.isRead;

    console.log(book);
}

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

关键说明 #

• 页数用type="number"输入框，既能限制用户输入非数字内容，又能让Number()转换更可靠；如果需要处理空输入，可以改成book.pages = book.pages ? Number(book.pages) : 0。
• 复选框的checked属性本身就是布尔值，直接调用最省心；用FormData的话，未选中的复选框不会出现在返回结果里，所以用!!把存在性直接转成布尔值即可。

内容的提问来源于stack exchange，提问作者AbigailDawson