# 复选按钮 Checkboxes 复选框用来提供一组选项，可以选中不止一个选项。传统的桌面程序的单选按钮组没有对触摸输入的方式进行优化，所以在Jquery Mobile中，label也被样式化为复选按钮，使按钮更长，容易点击。并添加了自定义的一组图标来增强视觉反馈。 单选按钮组和复选按钮组都是用标准的html代码写的，但是都被样式化得更容易点击。你所看见的控件其实是覆盖在input上的label元素， 所以如果图片没有正确加载，你仍然可以正常使用控件。在大多数浏览器里，点击label会自动触发在input上的点击，但是我们不得不为部分不支持该特性的移动浏览器人工去触发该点击。在桌面程序里，键盘和屏幕阅读器也可以使用这些控件。 要创建一组复选框，为input添加 type="checkbox"属性和相应的label即可。注意要把label的for属性设为input的id值，使他们能够在语义上相关联。 因为复选按钮使用label元素放置checkbox后，用来显示其文本，我们推荐把复选按钮组用fieldset容器包裹，并给fieldset容器内增加一个legend 元素，用来表示该问题的标题。 最后，还需将fieldset包裹在有data-role="controlgroup"属性的div 里以便于将该组元素和文本框，选择框等其他表单元素同时设置样式。 **HTML 代码:** ``` <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Agree to the terms:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">I agree</label> </fieldset> </div> ``` ## 垂直成组的复选按钮组 Vertically grouped checkboxes 通常情况下，复选按钮组会置于标题下面。 Jquery Mobile会自动移除按钮间的margin，给按钮组上下添加圆角，使得单选按钮组看起来为一个整体。  ## 水平的复选按钮组 Horizontal toggle sets 复选按钮组也可用作复选的水平按钮组，,可以同时选择多个按钮。比如说文字编辑器的粗体,斜体, 下划线。只需要为fieldset添加 data-type="horizontal"属性即可。 ``` <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> ``` Jquery Mobile会自动将标签浮动，并排放置，并隐藏复选按钮的icon,并给左右两边的按钮增加圆角。 ## Refreshing a checkbox 复选按钮组也可用作复选的水平按钮组，,可以同时选择多个按钮。比如说文字编辑器的粗体,斜体, 下划线。只需要为fieldset添加 data-type="horizontal"属性即可。