一、复选框Checkbox

复选框是用来提供一系列选项的，你可以选择其中的一个或多个选项。传统的桌面端复选框并未针对触屏输入做优化。在jQuery Mobile框架中，我们通过修饰label标签的样式来使得label标签变得更大并看起来可以点击。在label标签中我们加入了一些自定义图标，以便label标签可以对点击动作提供相应的视觉反馈。下述复选框组件采用的是标准的input/label标记，但是添加了一些样式使得这些标记在触屏设备上显得更加友好。你所看到的有样式的控件其实就是label元素，它位于input元素的上方，所以，即便遇到图标加载失败的情况，复选框仍能正常工作，不会随随便便就罢工的。在多数浏览器下，点击label元素等价于点击了input元素；但是在一些不支持该原生效果的浏览器下，我们不得不手动去触发input的点击效果。在桌面端，这些控件是可以通过按键和屏幕阅读器访问到的。要创建一个复选框，需要添加一个type属性值为checkbox的input元素，以及一个相应的label元素。若input元素未包裹在label元素内，别忘了给label元素添加一个for属性，其属性值应为对应input元素的id值，这么做之后，这个input元素和label元素才在语义上被关联起来了。

html

<label><input type="checkbox" name="checkbox-0" /> I agree </label>

上面的写法和下面这种写法作用是一样的。

html

<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>

上面这些代码片段产生的是最基本的复选框，其默认宽度会达到父容器宽度的100%。

二、迷你版

迷你版的复选框组件在工具条和紧凑的空间中非常有用。要实现迷你版的复选框组件，只要给input元素添加data-mini="true"即可。 I agree 迷你版复选框组件在高度和字体大小上就有所减小。

三、字段容器和说明Field containers & Legends

将多个复选框组件包裹在一个class值含有ui-field-contain的容器中，可以达到在复杂表单中将这些复选框在视觉上聚合起来的效果。当然，这个容器是可选而非必须的，看你自己喜好吧。请注意，data-role="fieldcontain"在jQuery Mobile 1.4.0版本中已经不提倡使用了，并且会在1.5.0版本中移除（现在正确的做法是使用ui-field-contain类）。因为复选框组件是使用label元素来显示复选框input元素对应的文字内容的，因此我们建议将复选框组件包裹在一个fieldset元素中，并建议在这个fieldset元素中加入一个legend元素（该元素有点问题的标题的意思）。在fieldset元素上添加data-role="controlgroup"，这样它会显得跟text input、select或其他表单元素比较类似。

html

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Agree to the terms:</legend>
    <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
    <label for="checkbox-2">I agree</label>
  </fieldset>
</div>

四、竖直方向聚合的复选框

通常，一个问题下会列有多个复选框。为了在视觉上将多个复选框组件集成为一个聚合按钮组，可以在fieldset上添加data-role="controlgroup"，然后jQuery Mobile框架会自动移除按钮之间的外边距（margin），并且整个按钮组只有最顶部和底部有圆角。

html

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Choose as many snacks as you'd like:</legend>
    <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
    <label for="checkbox-1a">Cheetos</label>
    <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
    <label for="checkbox-2a">Doritos</label>
    <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
    <label for="checkbox-3a">Fritos</label>
    <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
    <label for="checkbox-4a">Sun Chips</label>
  </fieldset>
</div>

五、水平开关组

复选框亦可被用作可以选择一个或多个按钮的聚合按钮组（比如文字处理软件上的粗体、斜体、下划线按钮组）。要实现水平按钮组，需要在fieldset元素上添加data-type="horizontal"。

html

<div class="ui-field-contain">
  <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Font styling:</legend>
    <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
    <label for="checkbox-6">b</label>
    <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
    <label for="checkbox-7"><em>i</em></label>
    <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
    <label for="checkbox-8">u</label>
  </fieldset>
</div>

在水平开关组中，jQuery Mobile框架会浮动label标签，因此这些label标签会一个挨着一个地显示在同一行里（当然，这是在label标签没有多到一行容纳不了的情况下），jQuery Mobile框架还会隐藏掉复选框的icon，并且，整个按钮组只有最左侧和右侧有圆角会得到保留。

六、单选按钮(Radio buttons)

单选按钮也是用来提供一系列选项的，但与复选框不同的是，单选按钮中你只能选择一个选项按钮。传统的桌面单选按钮并未针对触屏输入进行优化，jQuery Mobile框架会通过修改label的样式来使得label元素变得更大并使其看起来是可以点击的。为了增加单选按钮的视觉反馈，jQuery Mobile框架向label元素添加了一些图标（icon）。下面所讲的单选按钮用的是标准的input/label标记，不过jQuery Mobile框架修改了它们的样式，使得它们在触屏设备上表现得更加友好。你所看到的有样式的控件其实只是label元素而已，label元素位于真正的input元素的上方。即便在图片加载失败的情况下，单选按钮仍能实现其功能。在大多数浏览器下，点击label标签等同于点击了对应的input元素；但是在一些原生不支持可通过点击label实现点击input效果的浏览器下，我们不得不手动添加这个效果。在桌面端，这些控件是可以通过按键和屏幕阅读器来访问到的。

七、竖直方向上的聚合单选按钮

要创建单选按钮，需要添加一个type值为radio的input元素，和一个对应的label元素。给label元素添加一个for属性，其值为对应的input元素的id值，这样的话，这个label元素和input元素才在语义上相互关联了起来。 label元素是挨着radio input元素的。将单选按钮包裹在一个fieldset元素内，并在fieldset元素内添加一个legend元素以进行注释。要在视觉上将多个单选按钮集成为一个聚合按钮组，可以在fieldset容器上添加data-role="controlgroup"，这样jQuery Mobile框架会自动移除单选按钮之间的外边距，并只在整个按钮组的最上方和最下方使用圆角效果。

html

<fieldset data-role="controlgroup">
  <legend>Choose a pet:</legend>
  <input
    type="radio"
    name="radio-choice"
    id="radio-choice-1"
    value="choice-1"
    checked="checked"
  />
  <label for="radio-choice-1">Cat</label>
  <input
    type="radio"
    name="radio-choice"
    id="radio-choice-2"
    value="choice-2"
  />
  <label for="radio-choice-2">Dog</label>
  <input
    type="radio"
    name="radio-choice"
    id="radio-choice-3"
    value="choice-3"
  />
  <label for="radio-choice-3">Hamster</label>
  <input
    type="radio"
    name="radio-choice"
    id="radio-choice-4"
    value="choice-4"
  />
  <label for="radio-choice-4">Lizard</label>
</fieldset>

上面这段代码会产生一个竖直方向上的聚合按钮组。其默认宽度会占到父容器的100%。label元素会一行一个地堆积下来。

八、迷你版本

在fieldset容器上添加data-mini="true"可以获得迷你版的单选按钮，迷你版的单选按钮组在工具条和紧凑的空间中非常有用。

html

<fieldset data-role="controlgroup" data-mini="true">
  <input
    type="radio"
    name="radio-mini"
    id="radio-mini-1"
    value="choice-1"
    checked="checked"
  />
  <label for="radio-mini-1">Credit</label>
  <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2" />
  <label for="radio-mini-2">Debit</label>
  <input type="radio" name="radio-mini" id="radio-mini-3" value="choice-3" />
  <label for="radio-mini-3">Cash</label>
</fieldset>

迷你版的单选按钮在高度和字体大小上都比正常版本的要小。

九、字段容器（Field containers）

可以在单选按钮外包裹上一层带有ui-field-contain类的容器，这样可以在复杂冗长的表单中上将需要聚合的按钮在视觉上聚合起来，当然，这是可选而非必须的。请注意，data-role="fieldcontain"在jQuery Mobile 1.4.0中已经不再建议使用了，并且会再1.5.0版本中移除。现在正确的做法是使用ui-field-contain类。

html

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>Choose a pet:</legend>
    <input
      type="radio"
      name="radio-choice-2"
      id="radio-choice-1"
      value="choice-1"
      checked="checked"
    />
    <label for="radio-choice-1">Cat</label>
    <input
      type="radio"
      name="radio-choice-2"
      id="radio-choice-2"
      value="choice-2"
    />
    <label for="radio-choice-2">Dog</label>
    <input
      type="radio"
      name="radio-choice-2"
      id="radio-choice-3"
      value="choice-3"
    />
    <label for="radio-choice-3">Hamster</label>
    <input
      type="radio"
      name="radio-choice-2"
      id="radio-choice-4"
      value="choice-4"
    />
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

十、水平单选按钮组

单选按钮组亦可被用作只能选择其中一个按钮的聚合按钮组（比如视图切换控件）。要想实现水平单选按钮组，只要给fieldset元素加上dat-type="horizontal"即可。 <fieldset data-role="controlgroup" data-type="horizontal"> jQuery Mobile框架会浮动label元素，所以label元素会一个挨着一个地在一行内显示（label没有多到一行塞不下的情况下）。单选按钮的icon会被隐藏，并且只有整个按钮组的做左边和最右边有圆角。

十一、提供预渲染标记（pre-rendered markup）

你可以通过事先提供好通常由jQuery Mobile框架在初始化checkboxradio组件时产生的HTML标记来减少页面的加载时间。若你打算自己事先提供好预渲染标记，你需要添加data-enhanced="true"来告诉jQuery Mobile你已经事先提供好了预渲染标记，不然人家怎么知道呢？jQuery Mobile在得知你已经自己提供了预渲染标记的情况下，就会假定原本需要渲染出来的HTML标记已经存在了，不会再在初始化的过程中对checkboxradio组件进行DOM操作了。在提供预渲染标记的情况下，你必须添加好通常会由jQuery Mobile框架添加的class类值，你还必须添加好所有异于默认值的dataset属性值，这样jQuery Mobile框架才知道这个组件选项中有哪些项的值不是默认值。 checkboxradio组件会将input元素包裹在一个div元素里，并且会将label元素放进div元素内部的最前面（也就是div元素内部的input元素的前面）。下面的例子就是一个复选框的预渲染标记。在这段代码中，我们显式地设定了data-corners="false"，因为label元素上ui-corner-all类的缺失本身也说明了我们不打算在这里应用corners组件。

html

<div class="ui-checkbox">
  <label for="my-checkbox" class="ui-btn ui-btn-inherit ui-btn-icon-left ui-checkbox-off">My Checkbox</label>
  <input type="checkbox" id="my-checkbox" data-corners="false" data-enhanced="true"></input>
</div>

十二、选项

12.1、defaults

布尔型，默认值为false。若设定为true，会告诉jQuery Mobile框架其他组件选项全部采用默认值，这会告诉jQuery Mobile的组件自动增强代码去忽略从dataset属性获取选项值的过程，从而可以加快启动速度。也可以通过data-defaults="true"来设定。在checkboxradio组件初始化过程中指定defaults： $( ".selector" ).checkboxradio({ defaults: true }); 在checkboxradio组件初始化后获取/设定defaults：获取：var defaults = $(" . s e l e c t o r ") . c h e c k b o x r a d i o (" o p t i o n ", " d e f a u l t s "); 设定：$ ( ".selector" ).checkboxradio( "option", "defaults", true );

12.2、disabled

布尔型，默认值为false。若设定为true会禁用checkboxradio组件。也可通过data-disabled="true"来设定。在checkboxradio组件初始化过程中设定disabled： $( ".selector" ).checkboxradio({ disabled: true }); 在checkboxradio组件初始哈结束后获取/设定disabled：获取：var disabled = $(" . s e l e c t o r ") . c h e c k b o x r a d i o (" o p t i o n ", " d i s a b l e d "); 设定：$ ( ".selector" ).checkboxradio( "option", "disabled", true );

12.3、enhanced

布尔型，默认值为false。若设定为true，等于告诉jQuery Mobile框架你已经在原始HTML标记中提供了实现checkboxradio组件所必须的HTML标记。也可通过data-enhanced="true"来设定。在checkboxradio组件初始化过程中指定enhanced： $( ".selector" ).checkboxradio({ enhanced: true }); 在checkboxradio初始化结束后获取、设定enhanced：获取：var enhanced = $(" . s e l e c t o r ") . c h e c k b o x r a d i o (" o p t i o n ", " e n h a n c e d "); 设定：$ ( ".selector" ).checkboxradio( "option", "enhanced", true );

12.4、iconpos

字符串型，默认值为"left"。用于指明在复选框或单选按钮的icon显示在什么位置。可以通过data-iconpos="right"来设定。在checkboxradio初始化的过程中指明iconpos： $( ".selector" ).checkboxradio({ iconpos: "right" }); 在checkboxradio组件初始化之后获取、设定iconpos：获取：var iconpos = $(" . s e l e c t o r ") . c h e c k b o x r a d i o (" o p t i o n ", " i c o n p o s "); 设定：$ ( ".selector" ).checkboxradio( "option", "iconpos", "right" );

12.5、initSelector

selector类型。checkboxradio组件默认的initSelector为： "input:not( :jqmData(role='flipswitch' ) )[type='checkbox'],input[type='radio']:not( :jqmData(role='flipswitch' ))" 请注意，这个选项在jQuery Mobile 1.4.0版本中已经不提倡使用了，并且在1.5.0版本中会移除。在jQuery Mobile 1.4.0中initSelector已不再是组件选项了，而是直接在组件原型（widget prototype）中进行声明的。因此，你可以通过绑定mobileinit事件并在原型上重写initSelector来指定自定义的值。再次请注意，请务必在加载完jQuery之后、加载jQuery Mobile之前绑定mobileinit事件，因为这个monileinit事件是在加载jQuery Mobile的过程中触发的。该选项的值为jQuery选择器字符串。jQuery Mobile框架会根据该选项的值来选择相应的元素，并根据这些选择器字符串对应的元素来初始化checkboxradio组件。

12.6、mini

布尔型，默认值为null (false)。若设定为true，会实现迷你型的checkboxradio组件，其竖直方向上的高度会比常规的checkboxradio组件小（这是通过在checkboxradio组件最外层元素上添加ui-mini类实现的）。也可通过data-mini="true"来设定。

12.7、wrapperClass

jQuery Mobile框架会在原始input元素外面包裹上一层div元素，然而我们若想在这个div容器上添加自定义的class类值是比较困难的。Query Mobile框架允许你通过wrapperClass方法来给这个div容器加上自定义的一个或由空格分开的多个class类值。亦可通过data-wrapper-class="custom-class"来设定。在checkboxradio初始化时指定wrapperClass： $( ".selector" ).checkboxradio({ wrapperClass: "custom-class" }); 在checkboxradio初始化结束后获取、设定wrapperClass：获取：var wrapperClass = $(" . s e l e c t o r ") . c h e c k b o x r a d i o (" o p t i o n ", " w r a p p e r C l a s s "); 设定：$ ( ".selector" ).checkboxradio( "option", "wrapperClass", "custom-class" );

十三、方法

13.1、destroy()

彻底移除checkboxradio组件功能。这会将元素返回至其被jQuery Mobile初始化之前的状态。该方法不接受任何参数。调用destroy方法：$( ".selector" ).checkboxradio( "destroy" );

13.2、disable()

禁用掉checkboxradio组件。该方法不接受任何参数。调用disable方法：$( ".selector" ).checkboxradio( "disable" );

13.3、enable()

启用checkboxradio组件。该方法不接受任何参数。调用enable方法：$( ".selector" ).checkboxradio( "enable" );

13.4、option( optionName )

获取optionName当前对应的值。optionName为字符串型参数。调用该方法：var isDisabled = $( ".selector" ).checkboxradio( "option", "disabled" );

13.5、option()

获取一个含有反应checkboxradio当前选项配置key/value对的对象。该方法不接受任何参数。调用该方法：var options = $( ".selector" ).checkboxradio( "option" );

13.6、option( optionName, value )

设定checkboxradio组件指定optionName选项的值。optionName参数为字符串型，value参数为object。调用方法：$( ".selector" ).checkboxradio( "option", "disabled", true );

13.7、option( options )

设定checkboxradio组件的一个或多个选项。options参数为object类型，内含“选项-值”对。调用该方法：$( ".selector" ).checkboxradio( "option", { disabled: true } );

13.8、refresh()

更新checkboxradio组件。如果你通过JavaScript操作了checkboxradio组件，你需要调用refresh方法才能更新checkboxradio组件的外观。该方法不接受任何参数。调用该方法： $(" . s e l e c t o r ") . c h e c k b o x r a d i o (" r e f r e s h "); 在改变 c h e c k e d 属性后调用 r e f r e s h 方法：$ ( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

十四、事件

14.1、create( event, ui )

创建好checkboxradio组件时会触发该事件。event参数为event类型，ui参数为object类型。注意，ui参数为空对象，但为与其他事件保持一致请勿省略。在初始化checkboxradio时指定create回调函数： $( ".selector" ).checkboxradio({ create: function( event, ui ) {} }); 绑定一个事件监听器（event listener）到checkboxradiocreate事件上： $( ".selector" ).on( "checkboxradiocreate", function( event, ui ) {} );

十五、DEMO

在一个 fieldcontainer 内的复选框：

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>checkboxradio demo</title>
    <link
      rel="stylesheet"
      href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
    />
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="page1">
      <div data-role="header"><h1>jQuery Mobile Example</h1></div>
      <div role="main" class="ui-content">
        <div class="ui-field-contain">
          <form>
            <fieldset data-role="controlgroup">
              <legend>Agree to the terms:</legend>
              <input
                type="checkbox"
                name="checkbox-2"
                id="checkbox-2"
                class="custom"
              />
              <label for="checkbox-2">I agree</label>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>
竖直方向上的聚合单选按钮： <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>checkboxradio demo</title>
    <link
      rel="stylesheet"
      href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"
    />
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="page1">
      <div data-role="header"><h1>jQuery Mobile Example</h1></div>
      <div role="main" class="ui-content">
        <form>
          <fieldset data-role="controlgroup">
            <legend>Choose a pet:</legend>
            <input
              type="radio"
              name="radio-choice"
              id="radio-choice-1"
              value="choice-1"
              checked="checked"
            />
            <label for="radio-choice-1">Cat</label>
            <input
              type="radio"
              name="radio-choice"
              id="radio-choice-2"
              value="choice-2"
            />
            <label for="radio-choice-2">Dog</label>
            <input
              type="radio"
              name="radio-choice"
              id="radio-choice-3"
              value="choice-3"
            />
            <label for="radio-choice-3">Hamster</label>
            <input
              type="radio"
              name="radio-choice"
              id="radio-choice-4"
              value="choice-4"
            />
            <label for="radio-choice-4">Lizard</label>
          </fieldset>
        </form>
      </div>
    </div>
  </body>
</html>

参考：http://api.jquerymobile.com/checkboxradio/

以上，滕运锋，2015年12月31日于上海

jQuery Mobile: Checkboxradio widget ​

一、复选框Checkbox ​

二、迷你版 ​

三、字段容器和说明Field containers & Legends ​

四、竖直方向聚合的复选框 ​

五、水平开关组 ​

六、单选按钮(Radio buttons) ​

七、竖直方向上的聚合单选按钮 ​

八、迷你版本 ​

九、字段容器（Field containers） ​

十、水平单选按钮组 ​

十一、提供预渲染标记（pre-rendered markup） ​

十二、选项 ​

12.1、defaults ​

12.2、disabled ​

12.3、enhanced ​

12.4、iconpos ​

12.5、initSelector ​

12.6、mini ​

12.7、wrapperClass ​

十三、方法 ​

13.1、destroy() ​

13.2、disable() ​

13.3、enable() ​

13.4、option( optionName ) ​

13.5、option() ​

13.6、option( optionName, value ) ​

13.7、option( options ) ​

13.8、refresh() ​

十四、事件 ​

14.1、create( event, ui ) ​

十五、DEMO ​

jQuery Mobile: Checkboxradio widget

一、复选框Checkbox

二、迷你版

三、字段容器和说明Field containers & Legends

四、竖直方向聚合的复选框

五、水平开关组

六、单选按钮(Radio buttons)

七、竖直方向上的聚合单选按钮

八、迷你版本

九、字段容器（Field containers）

十、水平单选按钮组

十一、提供预渲染标记（pre-rendered markup）

十二、选项

12.1、defaults

12.2、disabled

12.3、enhanced

12.4、iconpos

12.5、initSelector

12.6、mini

12.7、wrapperClass

十三、方法

13.1、destroy()

13.2、disable()

13.3、enable()

13.4、option( optionName )

13.5、option()

13.6、option( optionName, value )

13.7、option( options )

13.8、refresh()

十四、事件

14.1、create( event, ui )

十五、DEMO