AmazeUI 单选框和多选框的实现示例


Posted in HTML / CSS onAugust 18, 2020

本文主要介绍了AmazeUI 单选框和多选框的实现示例,分享给大家,也给自己留个笔记,具体如下:

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>单选框和多选框</title>
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style=" padding: 50px;">
<!--默认样式-->
<div class="am-g">
  <div class="am-u-sm-6">
    <h3>复选框</h3>
    <label class="am-checkbox">
      <input type="checkbox" value="" data-am-ucheck> 没有选中
    </label>
    <label class="am-checkbox">
      <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">
      <input type="radio" name="radio1" value="" data-am-ucheck>
      未选中
    </label>
    <label class="am-radio">
      <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>
<!--颜色变化-->
<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>
<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 class="am-form-group">
  <h3>装备</h3>
  <label class="am-checkbox-inline">
    <input type="checkbox"  value="" data-am-ucheck> iPhone
  </label>
  <label class="am-checkbox-inline">
    <input type="checkbox"  value="" data-am-ucheck> iMac
  </label>
  <label class="am-checkbox-inline">
    <input type="checkbox"  value="" data-am-ucheck> Macbook
  </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>
<!--结合表单验证插件-->
<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"> iPhone
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="im" data-am-ucheck> iMac
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="mbp" data-am-ucheck> Macbook Pro
    </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> Surface
    </label>
    <label class="am-checkbox">
      <input type="checkbox" name="cbx" value="rb" data-am-ucheck> Razer Blade
    </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>
      <div><button type="submit" class="am-btn am-btn-primary">提交</button></div>
</form>

</body>
</html>

效果图:

AmazeUI 单选框和多选框的实现示例

到此这篇关于AmazeUI 单选框和多选框的实现示例的文章就介绍到这了,更多相关AmazeUI 单选框和多选框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
amazeui时间组件的实现示例
Aug 18 #HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 #HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 #HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 #HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 #HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 #HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 #HTML / CSS
You might like
第十三节--对象串行化
2006/11/16 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
javascript创建和存储cookie示例
2014/01/07 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
策划助理岗位职责
2013/11/18 职场文书
技校个人求职信范文
2014/01/25 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
nginx之内存池的实现
2022/06/28 Servers