HTML5 - 选择多个必填复选框答案

【问题标题】：HTML5 - Select multi required-checkboxHTML5 - 选择多个必填复选框
【发布时间】：2011-06-02 15:16:32
【问题描述】：

我在这里写了一些代码：http://jsfiddle.net/anhtran/kXsj9/8/

用户必须在组中选择至少 1 个选项。但这使我必须单击所有这些才能提交表单。没有javascript如何解决这个问题？

感谢您的帮助:)

【问题讨论】：

标签： html mootools checkbox checkboxlist

【解决方案1】：

我认为这个 html5 属性只应该定义哪些字段是必需的。你不能把逻辑说成“至少需要一个”。

您需要添加自定义 javascript 才能使其工作（和/或在服务器端进行验证）。

希望这会有所帮助...

【讨论】：

好伤心，我不喜欢用太多的js。虽然，我别无选择:) 谢谢

【解决方案2】：

理想的答案是使用 HTML5 和 required 属性作为 select 元素的一部分，如下所示：

<form method="post" action="processForm.php">
    <label for="myLanguages">What languages can you program in?</label>
    <br>
    <select id="myLanguages" multiple required>
        <option value="C#">C#
        <option value="Java">Java
        <option value="PHP">PHP
        <option value="Perl">Perl
        <option value="Haskell">Haskell
    </select>
    <br>
    <input type="submit" value="Submit">
</form>

是的，我知道它们不是复选框，但最终功能正是您想要的。遗憾的是，IE 9 和 Safari 5 目前都不支持required 属性。但是，Chrome 13 和 FF 5 可以。（在 Win 7 上测试）

【讨论】：

【解决方案3】：

我认为在使用 CSS 之后可以部分完成您的工作。不使用 required 属性，而是在未选择任何内容时隐藏提交按钮。

您将摆脱 required 属性并使用与此类似的 CSS：

input[type=submit] {
    display:none;
}

input[type=checkbox]:checked ~ input[type=submit] {
    display:block;
}

但是，该特定 CSS 不适用于我的 Google Chrome 版本。我对此提出了一个问题here。不过，它似乎在我的 FF 3.6 上运行良好。

【讨论】：

这不是一个可靠的解决方案 - 最好使用 javascript 或在服务器端完成验证

【解决方案4】：

如果没有 javascript，您将无法做到这一点。您可以做的是选择一个默认选项并将其设置为选中。但它不能保证在提交表单时选中了一个复选框。

【讨论】：