# 单选按钮组 Radio buttons
复选框用来提供一组选项,可以选中不止一个选项。传统的桌面程序的单选按钮组没有对触摸输入的方式进行优化,所以在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 里以便于将该组元素和文本框,选择框等其他表单元素同时设置样式?p>
**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,并给左右两边的按钮增加圆角
![](images/form%20element/checbox2.png)
## 刷新复选按钮 Refreshing a checkbox
如果你想通过js手动控制复选按钮,务必调用 refresh 方法刷新样式
```
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
```
- 综述
- Jquery mobile介绍 Jquery Mobile Overview
- 关键特性: Key features:
- 可访问性 Accessibility
- a4版本支持的平台 Supported platforms in Alpha 4
- API
- 默认配置
- 事件
- 方法
- 有响应的布局助手
- 主题
- 组件
- 页面与对话框
- 页面
- 页面转场 Page transitions
- 创建对话框 Creating dialogs
- Jquery Mobile的导航模型 Jquery Mobile's navigation model
- 链接的格式 Link formats
- 给页面主题样式 Page Theming
- 工具栏
- 工具栏
- 头部栏
- 尾部栏
- 导航栏
- 固定定位的工具栏会在滚屏后重新出现 Fixed toolbars will re-appear after you scroll
- 全屏的固定的工具栏 Fullscreen fixed toolbar
- 持续的尾部栏 Persistent footer nav bar
- 给头部栏和尾部栏设置主题样式
- 按钮
- 按钮标记选项 Button markup options
- 给按钮添加图标 Adding Icons to Buttons
- 内联按钮 Inline buttons
- 组按钮 Grouped buttons
- 主题化按钮 Theming buttons
- 内容的格式化
- html格式化 HTML Formatting
- 布局网格 Layout grids
- 可折叠的内容 Collapsible content markup
- 给内容主题 Theming content
- 表单元素
- 表单元素 Form elements
- 表单元素示例 Form element gallery
- 文本输入框 Text inputs
- 搜索输入框 Search inputs
- 滑动条 Slider
- 开关 Flip toggle switches
- 复选按钮 Checkboxes
- 单选按钮组 Radio buttons
- 选择菜单 Select menus
- 表单的主题样式 Form themes
- ajax的表单提交 Ajax form submission
- 表单插件的方法 Form Plugin Methods
- Jquery UI 的移动版日期拾取器插件 Jquery UI's Datepicker Styled for mobile
- 列表
- 列表 List views
- 列表标记的规约List markup conventions