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>