当前位置：文江博客话题详情

HTML5 - 选择多个必填复选框

发布于 2024-11-13 08:04:30 字数 215 浏览 2 评论 0原文

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

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

感谢您的帮助:)

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青芜 2024-11-20 08:04:30

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

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

希望这有帮助...

回复收藏 0 原文

咽泪装欢 2024-11-20 08:04:30

理想的答案是使用 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上测试）

The ideal answer would be to use HTML5 and the required attribute as part of a select element, like so:

<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>

Yes, I know they are not checkboxes, but the end functionality is exactly what you want. Sadly, neither IE 9 nor Safari 5 currently have support for the required attribute. Chrome 13 and FF 5, however, do. (Tested on Win 7)

回复收藏 0 原文

如梦 2024-11-20 08:04:30

我认为使用 CSS 可以部分完成您所要做的事情。不使用 required 属性，而是在未选择任何内容的情况下隐藏提交按钮。

您可以删除 required 属性并使用与此类似的 CSS：

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

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

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

I thought it'd be possible, to do in part, what you were after using CSS. Not using the required attribute but to instead hide the submit button if nothing was selected.

You'd get rid of the required attributes and use CSS similar to this:

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

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

However, that particular CSS is not working on my version of Google Chrome. I've made a question regarding it here. It seems to be working fine on my FF 3.6 though.

回复收藏 0 原文