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 @font-face属性使用指南
Dec 12 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 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
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
利用javascript查看html源文件
2006/11/08 Javascript
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
python实现函数极小值
2019/07/10 Python
Django的models中on_delete参数详解
2019/07/16 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
基于Python解密仿射密码
2019/10/21 Python
Django分组聚合查询实例分享
2020/04/29 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
什么是TCP/IP
2014/07/27 面试题
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
公益广告语集锦
2014/03/13 职场文书
运动会加油稿100字
2014/09/19 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
R9700摩机记
2022/04/05 无线电