使用 HTML 在提交的表单之外获取选中的元素

Question

我有一个网页，顶部是一组单选按钮和一个提交按钮。这是相关代码：

<form action="/batch" method="POST">
    With checked selection you may: 
    <input type="radio" name="bulk" value="broadcast">Broadcast</input>
    <input type="radio" name="bulk" value="unbroadcast">Unbroadcast</input>
    <input type="radio" name="bulk" value="delete">Delete</input>
    <input type="submit" value="Run batch on checked items" />
</form>

在它下面我有一个 table 由一堆行组成，开头有复选框。代码是：

<td><input type="checkbox" name="{{ md5_name }}" class="box"/></td>

有没有办法让表单提交一个列表，列出复选框是什么以及它们是否被选中，而不管复选框不在表单中？也许命名相同或共享 class?

在发帖前四处搜索时，我从 this page 中找到了以下片段，看起来很有希望，但我不知道运行它与我的 POST 方法如何一起工作，或者我如何将结果包含在我的 POST 方法中。

function getRadioValue (theRadioGroup)
    {
        for (var i = 0; i < document.getElementsByName(theRadioGroup).length; i++)
    {
        if (document.getElementsByName(theRadioGroup)[i].checked)
        {
            return document.getElementsByName(theRadioGroup)[i].value;
        }
    }
}

Answer 1

您可以将函数绑定到表单的提交方法以检索复选框的值，并将它们添加到表单的隐藏字段中。

交替将复选框的默认值添加到隐藏字段，并将更改方法绑定到复选框以更新隐藏字段。

Answer 2

您可以在 HTML 5 文档类型中，使用 form 属性简单地将这些表单元素与特定表单相关联：

<td><input form="formElementID" type="checkbox" name="{{ md5_name }}" class="box"/></td>

这个属性：

Indicates the form that is the owner of the element¹

参考文献：

MDN：HTML Attribute reference.

参考书目：

HTML forms reference.

使用 HTML 在提交的表单之外获取选中的元素

Get checked elements outside of submitted form with HTML

html

javascript

forms