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动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
golang与PHP输出excel示例
2016/07/22 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
javascript event 事件解析
2011/01/31 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python之Socket网络编程详解
2016/09/29 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python中enumerate函数代码解析
2017/10/31 Python
浅析Python __name__ 是什么
2020/07/07 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
微观物理专业自荐信
2014/01/26 职场文书
2015年预算员工作总结
2015/05/14 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle