如何使复选框具有与其他输入相同的提交行为？

Question

我有一个搜索表单，默认情况下会选中几个复选框。当表单作为 GET 提交时，url 将仅包含选中的复选框列表。

http://www.example.com/page/?checkbox1=yes&checkbox2=yes

在这种情况下，很难确定用户第一次到达此搜索页面的时间与他们提交表单时所有复选框都未选中的时间之间的差异，因为查询字符串看起来相同。

为了解决这个问题，我开始在复选框前注入一个具有相同名称和“否”值的隐藏字段。当复选框未选中时，浏览器将发送隐藏字段的 no 值，当复选框被设置时，浏览器将使用复选框的“是”值覆盖隐藏字段。

<input type="hidden" name="checkbox1" value="no" />
<input type="checkbox" name="checkbox1" value="yes" />

当用户提交未选中所有复选框的表单时，我得到这个查询字符串：

http://www.example.com/page/?checkbox1=no&checkbox2=no

这似乎适用于 ff、chrome、ie5.5+，所以我可以安全地使用这种方法，还是有更好的方法让复选框像输入和选择一样提交？

Answer 1

这是一个非常聪明的主意。由于未选中的复选框不会出现在请求中，这确实有助于了解用户是否是第一次输入表单。

但是要知道您可以简单地使用具有默认值的隐藏字段。所以当用户输入表单时，参数没有设置。他一提交表单，值就设置好了。

您还可以为提交按钮命名，然后您可以查看它是否已提交：

<input type="submit" name="submit" />

这能解决你的问题吗？

Answer 2

解决真正的问题：

确定用户第一次到达此搜索页面的时间与他们提交表单时所有复选框都未选中的时间之间的差异

沿线有一个隐藏场

<input type="hidden" name="submitted" value="true">

然后您可以分组使用复选框：

<input type="checkbox" name="foo" value="bar" id="foo_bar">
<label for="foo_bar">Bar</label>

<input type="checkbox" name="foo" value="baz" id="foo_baz">
<label for="foo_baz">Baz</label>

然后你可以在服务器上循环它们。你如何做到这一点取决于你的服务器端环境。在大多数语言中，您可以调用返回数据数组的方法（IIRC Java 表单库倾向于以这种方式工作）或仅在数组上下文中请求数据（Perl 库通常以这种方式运行）。 PHP是服务器端编程的通用语言，有点奇怪，它要求你重命名字段以字符[]结尾。

Answer 3

正如你所说，它似乎工作正常。或者，您可以避免让它像普通输入一样，只检查输入是否存在（如果输入不存在，则将其视为假，如果存在，则将其视为真）。

例如，在 PHP 中

if(isset($_GET['checkbox1']) { ... }

在 ASP.NET 中

if (Request.QueryString["checkbox1"] != null) { ... }

当然，您可能有自己的理由想要做那个客户端。