HTML5 - 选择多个必填复选框

Question

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

用户必须在组中选择至少1个选项。但这让我必须点击所有这些才能提交表格。没有javascript怎么办这个问题？

感谢您的帮助：）

Answer 1

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

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

希望这会有所帮助...

Answer 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上测试）

Answer 3

我认为在使用CSS之后，你可以做部分工作。如果未选择任何内容，则不使用必需属性，而是隐藏提交按钮。

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

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

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

但是，该特定的CSS无法在我的Google Chrome版本上运行。我提出了一个问题here。它似乎在我的FF 3.6上工作正常。

Answer 4

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