这篇文章主要介绍了AmazeUI单选框和多选框的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文主要介绍了AmazeUI单选框和多选框的实现示例,分享给大家,也给自己留个笔记,具体如下:
!声明文档类型
html class='no-js '
头
meta charset='utf-8 '
元http-equiv=' X-UA-兼容'内容='IE=edge '
元名称='视口'内容='宽度=设备宽度,初始比例=1 '
标题单选框和多选框/title
链接rel='样式表href=' assets/CSS/amazeui。量滴' CSS '
!-(GTE IE 9)|!(IE)]!-
脚本src=' assets/js/jquery。量滴js '/脚本
!- ![endif] -
!-[如果lte IE 8 ]
脚本src=' assets/ie8/jquery。量滴js '/脚本
脚本src=' assets/ie8/modernizr。js '/脚本
脚本src=' assets/js/amazeui。ie8 polyfill。量滴js '/脚本
![endif] -
脚本src=' assets/js/amazeui。量滴js '/脚本
/head
body style=' padding: 50px '
!-默认样式-
div class='am-g '
div class='am-u-sm-6 '
h3复选框/h3
label class='am-checkbox '
输入类型='复选框'值=' data-am-ucheck没有选中
/label
label class='am-checkbox '
输入类型='复选框'已选中='选中'值=' data-am-u check已选中
已选中
/label
label class='am-checkbox '
输入类型='复选框'值=' data-am-u检查已禁用
禁用/未选中
/label
label class='am-checkbox '
输入类型='复选框'已选中='选中'值=' data-am-u check已禁用
小方格子图案的
禁用/已选中
/label
/div
div class='am-u-sm-6 '
h3单选框/h3
label class='am-radio '
输入类型=' radio ' name=' radio 1 ' value=' ' data-am-ucheck
未选中
/label
label class='am-radio '
输入类型=' radio '名称=' radio 1 '值=' data-am-u check check
已选中
/label
label class='am-radio '
输入类型=' radio ' name=' radio 2 ' value=' data-am-u check disabled
禁用/未选中
/label
label class='am-radio '
输入类型=' radio '名称=' radio 2 '值=' data-am-u check check
有残疾的
禁用/已选中
/label
/div
/div
!-颜色变化-
label class=' am-checkbox am-secondary '
输入类型='复选框'值=' data-am-ucheck没有选中
/label
label class=' am-checkbox am-secondary '