Amaze UI

uCheck


选框图标使用 Icon Font,如果你的浏览器不支持 Icon Font,请谨慎使用。

基础用法

复选框

单选框

Copy
<style>
  .am-ucheck-icons [class*="am-icon"] + [class*="am-icon"] {
    margin-left: 0;
  }
</style>

<div class="am-g">
  <div class="am-u-sm-6">
    <h3>复选框</h3>
    <label class="am-checkbox needsclick">
      <input type="checkbox" value="" data-am-ucheck> 没有选中
    </label>
    <label class="am-checkbox needsclick">
      <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
      已选中
    </label>
    <label class="am-checkbox">
      <input type="checkbox" value="" data-am-ucheck disabled>
      禁用/未选中
    </label>
    <label class="am-checkbox">
      <input type="checkbox" checked="checked" value="" data-am-ucheck disabled
             checked>
      禁用/已选中
    </label>
  </div>

  <div class="am-u-sm-6">
    <h3>单选框</h3>
    <label class="am-radio needsclick">
      <input type="radio" name="radio1" value="" data-am-ucheck>
      未选中
    </label>
    <label class="am-radio needsclick">
      <input type="radio" name="radio1" value="" data-am-ucheck checked>
      已选中
    </label>

    <label class="am-radio">
      <input type="radio" name="radio2" value="" data-am-ucheck disabled>
      禁用/未选中
    </label>
    <label class="am-radio">
      <input type="radio" name="radio2" value="" data-am-ucheck checked
             disabled>
      禁用/已选中
    </label>
  </div>
</div>
  • am-checkbox- 复选框
  • am-radio- 单选框
  • checked- 是否选中
  • disabled- 是否禁用

在线运行

颜色用法

复选框

单选框

复选框

单选框

复选框

单选框

复选框

单选框

Copy
<div class="am-g">
  <div class="am-u-sm-6 am-u-md-3">
    <h3>复选框</h3>
    <label class="am-checkbox am-secondary">
      <input type="checkbox" value="" data-am-ucheck> 没有选中
    </label>
    <label class="am-checkbox am-secondary">
      <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
      已选中
    </label>
  </div>

  <div class="am-u-sm-6 am-u-md-3">
    <h3>单选框</h3>
    <label class="am-radio am-secondary">
      <input type="radio" name="radio3" value="" data-am-ucheck> 未选中
    </label>
    <label class="am-radio am-secondary">
      <input type="radio" name="radio3" value="" data-am-ucheck checked> 已选中
    </label>
  </div>

  <div class="am-u-sm-6 am-u-md-3">
    <h3>复选框</h3>
    <label class="am-checkbox am-success">
      <input type="checkbox" value="" data-am-ucheck> 没有选中
    </label>
    <label class="am-checkbox am-success">
      <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
      已选中
    </label>
  </div>

  <div class="am-u-sm-6 am-u-md-3">
    <h3>单选框</h3>
    <label class="am-radio am-success">
      <input type="radio" name="radio7" value="" data-am-ucheck> 未选中
    </label>
    <label class="am-radio am-success">
      <input type="radio" name="radio7" value="" data-am-ucheck checked> 已选中
    </label>
  </div>

  <div class="am-u-sm-6 am-u-md-3">
    <h3>复选框</h3>
    <label class="am-checkbox am-warning">
      <input type="checkbox" value="" data-am-ucheck> 没有选中
    </label>
    <label class="am-checkbox am-warning">
      <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
      已选中
    </label>
  </div>

  <div class="am-u-sm-6 am-u-md-3">
    <h3>单选框</h3>
    <label class="am-radio am-warning">
      <input type="radio" name="radio4" value="" data-am-ucheck> 未选中
    </label>
    <label class="am-radio am-warning">
      <input type="radio" name="radio4" value="" data-am-ucheck checked> 已选中
    </label>
  </div>

  <!-- red -->
  <div class="am-u-sm-6 am-u-md-3">
    <h3>复选框</h3>
    <label class="am-checkbox am-danger">
      <input type="checkbox" value="" data-am-ucheck> 没有选中
    </label>
    <label class="am-checkbox am-danger">
      <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
      已选中
    </label>
  </div>

  <div class="am-u-sm-6 am-u-md-3">
    <h3>单选框</h3>
    <label class="am-radio am-danger">
      <input type="radio" name="radio5" value="" data-am-ucheck> 未选中
    </label>
    <label class="am-radio am-danger">
      <input type="radio" name="radio5" value="" data-am-ucheck checked> 已选中
    </label>
  </div>
</div>

默认使用主色,如果需要调整颜色在 .am-checkbox/.am-checkbox 上添加颜色 class。

  • .am-secondary
  • .am-success
  • .am-warning
  • .am-danger

在线运行

行内排列

岗位

性别

Copy
<div class="am-form-group">
  <h3>岗位</h3>
  <label class="am-checkbox-inline">
    <input type="checkbox"  value="" data-am-ucheck> 前端
  </label>
  <label class="am-checkbox-inline">
    <input type="checkbox"  value="" data-am-ucheck> 运维
  </label>
  <label class="am-checkbox-inline">
    <input type="checkbox"  value="" data-am-ucheck> 设计
  </label>
</div>

<div class="am-form-group">
  <h3>性别</h3>
  <label class="am-radio-inline">
    <input type="radio" name="radio10" value="male" data-am-ucheck></label>
  <label class="am-radio-inline">
    <input type="radio" name="radio10" value="female" data-am-ucheck></label>
  <label class="am-radio-inline">
    <input type="radio" name="radio10" value="pig" data-am-ucheck> 保密
  </label>
</div>

<label> 元素上添加 .am-checkbox-inline class

在线运行

结合表单验证插件

职位* (至少 2 项,至多 4 项)

性别 *

Copy
<form class="am-form" data-am-validator>
  <div class="am-form-group">
    <h3>职位<sup class="am-text-danger">*</sup> (至少 2 项,至多 4 项)</h3>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="ip" data-am-ucheck required minchecked="2" maxchecked="4"> PHP
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="im" data-am-ucheck> 产品
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="mbp" data-am-ucheck> 设计
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="sf" data-am-ucheck> 运营
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="sur" data-am-ucheck> 前端
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="rb" data-am-ucheck> 运维
    </label>
  </div>

  <div class="am-form-group">
    <h3>性别 <sup class="am-text-danger">*</sup></h3>
    <label class="am-radio">
      <input type="radio" name="radio10" value="male" data-am-ucheck required></label>
    <label class="am-radio">
      <input type="radio" name="radio10" value="female" data-am-ucheck></label>
    <label class="am-radio">
      <input type="radio" name="radio10" value="pig" data-am-ucheck> 保密
    </label>
  </div>
  <button type="submit" class="am-btn am-btn-primary">提交</button>
</form>

限制选择数量参数。

  • minchecked="2" 最少几项
  • maxchecked="4" 最多几项

在线运行

触发方式

通过 Data API

radio/checkbox 上添加 data-am-ucheck 属性。

<label class="am-checkbox">
  <input type="checkbox" value="" data-am-ucheck> 没有选中
</label>

<label class="am-radio">
  <input type="radio" value="" data-am-ucheck> 没有选中
</label>

通过 JS

$(function() {
  $('input[type='checkbox'], input[type='radio']').uCheck();
});

方法

参数描述
$().uCheck('check')选中
$().uCheck('uncheck')取消选中
$().uCheck('toggle')切换选中状态
$().uCheck('disable')禁用
$().uCheck('enable')启动

参考链接