选择控件

Example

默认不选中

默认选中

禁用，且不选中

禁用，且选中

<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  默认不选中
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  默认选中
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  禁用，且不选中
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  禁用，且选中
</label>

Example

<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    默认不选中
  </label>
  
  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    默认选中
  </label>
  
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    禁用，且不选中
  </label>
  
</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    禁用，且选中
  </label>
</form>

Example

<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

CSS 类名列表

类名	效果
`.mdui-checkbox`	定义复选框。
`.mdui-checkbox-icon`	定义复选框内的图标。
`.mdui-radio`	定义单选框。
`.mdui-radio-icon`	定义单选框内的图标。
`.mdui-switch`	定义开/关切换。
`.mdui-switch-icon`	定义开/关切换内的图标。

调用方式

色彩

相关阅读

样式

复选框

单选框

开/关切换

CSS 类名列表