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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
原生js实现放大镜
2017/02/20 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vuex的简单使用教程
2018/02/02 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python中的random()方法的使用介绍
2015/05/15 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python多线程的退出控制实现
2020/08/10 Python
个人典型事迹材料
2014/12/30 职场文书
可怜妈妈观后感
2015/06/09 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android