HTML复选框，多个具有相同的“名称”。 如果选中，则值为1，如果未选中，则值为0

Question

在我的页面上，我有一个包含“添加行”按钮的表，因此用户可以根据需要添加更多行。 通过克隆表中的最后一行来添加该行。 在该行中，我想放置两个复选框。

<td class = ''> <input class = '' type='checkbox' name ='installed_by_cm' value='1'/>  </td>
<td class = ''> <input class = '' type='checkbox' name ='installed_after_cm' value='1'/>  </td>

这意味着有多个带有相同“名称”标记的复选框，这是我稍后在代码中进行数据处理所需要的。 我使用烧瓶request.form.getlist()获取python后端中的信息。

由于复选框类型的默认值为none，我不能使用隐藏的输入，因为它将始终由请求收集，因此我无法找到一种方法使复选框在选中时发送1，在未选中时发送0。 任何帮助将不胜感激。

Answer 1

最简单的方法，不需要javascript，只需在复选框前放置一个隐藏的输入即可：

<input type="hidden" name="check[0]" value="0" />
<input type="checkbox" name="check[0]" value="1" />

输入名称必须相同。 如果选中此复选框，则将提交值1，否则将从隐藏输入中提交值0。

您的案例javascript解决方案，无需隐藏的输入：

<script type="text/javascript">
    // when page is ready
    $(document).ready(function() {
         // on form submit
        $("#form").on('submit', function() {
            // to each unchecked checkbox
            $(this + 'input[type=checkbox]:not(:checked)').each(function () {
                // set value 0 and check it
                $(this).attr('checked', true).val(0);
            });
        })
    })
</script>

<form method="post" id="form">
    <input type="checkbox" name="check[0]" value="1" />
    <input type="checkbox" name="check[1]" value="1" />
    <input type="submit" value="Save Changes" />
</form>