单选框

垂直单选框

class 属性 描述
um-check-group (必填项),单选框控件父元素，定义背景色和边框
um-check-group-left (可选值),定义图标位置居左,去除后居右
um-check-inline 行内单选框标志
um-check-group-item 定义在label上代表一行
um-icon-check,
um-icon-checkbox		 (可选值),设置已选择图标,分别为单选框和复选框图标,可换成自定义类名,um-icon-*为css绘制的图标
um-css3-vc (必填项),使用css的transform定位图标的垂直居中 
  1. <div class="um-check-group um-check-group-left">
  2.     <label class="um-check-group-item">
  3.         <input name="um-radio" value="单选框1" checked  type="radio" value="">
  4.         单选框1 <span class="um-icon-check um-css3-vc"></span>
  5.     </label>
  6. </div>
效果如下

去除um-check-group-left 类后图标在右侧

js获取单选框选择的值
  1. $(".um-list-group").find("input:radio").on("change",function(){
  2.     if(this.checked) {
  3.         alert("您选择的是：" + $(this).val())
  4.     }
  5. })
行内单选框
  1. <label class="um-check-inline">
  2.     <input name="um-checkbox-inline" type="checkbox" value="自动登录" checked>
  3.     自动登录
  4.     <span class="um-icon-checkbox um-css3-vc"></span>
  5. </label>

文档更新时间: 2018-01-12 16:22