HTML5复选框的正确使用方法

Question

我似乎找不到一个例子... 应该如何正确地创建HTML5复选框？

- Skizit

---

跟HTML 4 复选框一样的方式？ - Pekka

Answer 1

据我所知并且文档说明，没有根本性的改变。基本标记如下：

<input name="your_name" value="your_value" type="checkbox">

有一些有趣的属性是新出现的。

• form - 与控件相关联的表单的引用（不错！）
• autofocus - 在文档加载后立即成为焦点（不错！）
• required - 要求它被选择（超级棒！尽管Internet Explorer或Safari（尚未）不支持。）

- Pekka

---

“+1 “超级棒！虽然我不完全理解这对复选框有什么意义。”非常正确..很好的发现...我应该在SO上提一个问题吗？” - naveen

为什么不呢？知道了会很有趣！ - Pekka

HTML5中，对于复选框和单选按钮(input type="checkbox" 和 input type="radio")的required属性，表示页面提交时必须选择其中之一。如果没有选则会弹出提示信息要求选择其中之一才能提交表单。 - naveen

对于复选框，只有当该表单中具有相同名称的一个或多个复选框被选中时，才需要满足required属性。对于单选按钮，只有当该单选按钮组中恰好有一个单选按钮被选中时，才需要满足required属性。 - The Surrican

@Joe Hopfgartner的引用问题在于它来自一个目前不具权威性的来源：http://www.whatwg.org/specs/web-forms/current-work/。那是旧的Web Forms 2工作；文档顶部承认它已被HTML5取代。不要根据该文档来建立您的期望！ - james.garriss

@JoeHopfgartner，@james.garriss：我认为HTML5复选框的“required”意味着它不能是*不确定状态*，但我没有参考资料。 - l0b0

Answer 2

一个更完整的例子 - 避免长串帖子到如何在jQuery中检查复选框是否已选中？。

HTML

<input id="your_id" name="your_name" value="your_value" type="checkbox">

可选地添加“checked”属性，以便在加载时默认为选中状态。

<input id="your_id" name="your_name" value="your_value" type="checkbox" checked>

JavaScript

$('#your_id').is(':checked')        // Returns a Boolean TRUE if checked

e.g.

if ($('#your_id').is(':checked')) {
    // Checkbox was checked
}

- wolfstevent

---

您正在使用jQuery，应该强调一下，虽然它是JavaScript库，但不是JavaScript。 - Vignesh