如何提交多个未勾选的Checkbox？自定义表单提交需求问询

表单提交时，未勾选的Checkbox不会向服务器提交任何值来表示其未选中状态（比如value=unchecked这类值完全不会被提交）。

常规的给未勾选Checkbox提交默认值的方法是在表单内添加同name的<input type="hidden">，比如设置value为false，示例代码如下：

<form>
  <input type='hidden' name='selfdestruct' value='0'>
  <input type='checkbox' name='selfdestruct' value='1'>
</form>

但这个方案不适用于我的场景：我需要以name作为标识符，value作为键，并且每个键都能对应一个布尔值（true或false）。我有大约200个代表用户每周可用时段的Checkbox，结构示例如下：

<div>
    <fieldset>
        <legend>周一</legend>
        <label>7 - 8
            <input type="checkbox" name="schedule" value="Monday-7" />
        </label>
        <label>8 - 9
            <input type="checkbox" name="schedule" value="Monday-8" />
        </label>
        ...
    </fieldset>
    <fieldset>
        <legend>周二</legend>
        <label>7 - 8
            <input type="checkbox" name="schedule" value="Tuesday-7" />
        </label>
        <label>8 - 9
            <input type="checkbox" name="schedule" value="Tuesday-8" />
        </label>
        ...
    </fieldset>
   ...
</div>

方法一：前端JavaScript处理表单提交 #

在表单提交前，遍历所有时段复选框，构造包含所有时段键与对应布尔值的对象，再按后端要求的格式提交数据。

示例代码：

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // 获取所有时段复选框的value列表
    const allScheduleValues = Array.from(document.querySelectorAll('input[name="schedule"]')).map(input => input.value);
    // 获取选中的复选框value列表
    const checkedValues = Array.from(document.querySelectorAll('input[name="schedule"]:checked')).map(input => input.value);
    
    // 构造目标键值对对象
    const scheduleData = {};
    allScheduleValues.forEach(value => {
        scheduleData[value] = checkedValues.includes(value);
    });
    
    // 方式1：以JSON格式提交
    fetch('/submit-url', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ schedule: scheduleData }),
    });
    
    // 方式2：将JSON转为字符串放入隐藏字段，再提交表单
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'schedule';
    hiddenInput.value = JSON.stringify(scheduleData);
    form.appendChild(hiddenInput);
    form.submit();
});

方法二：后端补全默认值 #

后端预定义所有可能的时段键，接收到提交的选中值后，遍历预定义列表，将存在的选中值设为true，未出现的设为false，生成完整的键值对对象。

以Python Flask为例，示例代码：

# 预定义所有可能的时段值（根据实际时段范围调整）
ALL_SCHEDULE_TIMES = [
    f"{day}-{hour}" for day in ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] 
    for hour in range(7, 24)  # 假设时段覆盖7点到23点
]

@app.route('/submit-schedule', methods=['POST'])
def submit_schedule():
    # 获取提交的选中时段列表
    checked_times = request.form.getlist('schedule')
    # 构造完整的布尔值字典
    schedule = {time: time in checked_times for time in ALL_SCHEDULE_TIMES}
    # 后续业务逻辑处理
    return jsonify(schedule)

内容的提问来源于stack exchange，提问作者André Casal