设为首页收藏本站
天天打卡
切换到窄版

 找回密码
 立即注册
搜索
爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享»首页 › 其他交流 | 闲聊交流 › HTML/Xhtml › AmazeUI 单选框和多选框的实现示例
12下一页
返回列表 发新帖
查看: 44|回复: 13

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

[复制链接]
Alien丶神

3

主题

53

回帖

170

积分

注册会员

积分
170
发表于 2024-4-20 10:28:27 | 显示全部楼层 |阅读模式
本文主要介绍了AmazeUI 单选框和多选框的实现示例，分享给大家，也给自己留个笔记，具体如下：
  1. <!doctype html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>单选框和多选框</title>
  8. <link rel="stylesheet" href="assets/css/amazeui.min.css">
  9. <!--[if (gte IE 9)|!(IE)]><!-->
  10. <script src="assets/js/jquery.min.js"></script>
  11. <!--<![endif]-->
  12. <!--[if lte IE 8 ]>
  13. <script src="assets/ie8/jquery.min.js"></script>
  14. <script src="assets/ie8/modernizr.js"></script>
  15. <script src="assets/js/amazeui.ie8polyfill.min.js"></script>
  16. <![endif]-->
  17. <script src="assets/js/amazeui.min.js"></script>
  18. </head>
  19. <body style=" padding: 50px;">
  20. <!--默认样式-->
  21. <div class="am-g">
  22.   <div class="am-u-sm-6">
  23.     <h3>复选框</h3>
  24.     <label class="am-checkbox">
  25.       <input type="checkbox" value="" data-am-ucheck> 没有选中
  26.     </label>
  27.     <label class="am-checkbox">
  28.       <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
  29.       已选中
  30.     </label>
  31.     <label class="am-checkbox">
  32.       <input type="checkbox" value="" data-am-ucheck disabled>
  33.       禁用/未选中
  34.     </label>
  35.     <label class="am-checkbox">
  36.       <input type="checkbox" checked="checked" value="" data-am-ucheck disabled
  37.              checked>
  38.       禁用/已选中
  39.     </label>
  40.   </div>
  41.   <div class="am-u-sm-6">
  42.     <h3>单选框</h3>
  43.     <label class="am-radio">
  44.       <input type="radio" name="radio1" value="" data-am-ucheck>
  45.       未选中
  46.     </label>
  47.     <label class="am-radio">
  48.       <input type="radio" name="radio1" value="" data-am-ucheck checked>
  49.       已选中
  50.     </label>
  51.     <label class="am-radio">
  52.       <input type="radio" name="radio2" value="" data-am-ucheck disabled>
  53.       禁用/未选中
  54.     </label>
  55.     <label class="am-radio">
  56.       <input type="radio" name="radio2" value="" data-am-ucheck checked
  57.              disabled>
  58.       禁用/已选中
  59.     </label>
  60.   </div>
  61. </div>
  62. <!--颜色变化-->
  63. <label class="am-checkbox am-secondary">
  64.   <input type="checkbox" value="" data-am-ucheck> 没有选中
  65. </label>
  66. <label class="am-checkbox am-secondary">
  67.   <input type="checkbox" checked="checked" value="" data-am-ucheck checked>
  68.   已选中
  69. </label>
  70. <label class="am-radio am-secondary">
  71.   <input type="radio" name="radio3" value="" data-am-ucheck> 未选中
  72. </label>
  73. <label class="am-radio am-secondary">
  74.   <input type="radio" name="radio3" value="" data-am-ucheck checked> 已选中
  75. </label>
  76. <!--行内排列-->
  77. <div class="am-form-group">
  78.   <h3>装备</h3>
  79.   <label class="am-checkbox-inline">
  80.     <input type="checkbox"  value="" data-am-ucheck> iPhone
  81.   </label>
  82.   <label class="am-checkbox-inline">
  83.     <input type="checkbox"  value="" data-am-ucheck> iMac
  84.   </label>
  85.   <label class="am-checkbox-inline">
  86.     <input type="checkbox"  value="" data-am-ucheck> Macbook
  87.   </label>
  88. </div>
  89. <div class="am-form-group">
  90.   <h3>性别</h3>
  91.   <label class="am-radio-inline">
  92.     <input type="radio" name="radio10" value="male" data-am-ucheck> 男
  93.   </label>
  94.   <label class="am-radio-inline">
  95.     <input type="radio" name="radio10" value="female" data-am-ucheck> 女
  96.   </label>
  97.   <label class="am-radio-inline">
  98.     <input type="radio" name="radio10" value="pig" data-am-ucheck> 空
  99.   </label>
  100. </div>
  101. <!--结合表单验证插件-->
  102. <form class="am-form" data-am-validator>
  103.   <div class="am-form-group">
  104.     <h3>装备<sup class="am-text-danger">*</sup> （至少 2 项，至多 4 项）</h3>
  105.     <label class="am-checkbox">
  106.       <input type="checkbox" name="cbx" value="ip" data-am-ucheck required minchecked="2" maxchecked="4"> iPhone
  107.     </label>
  108.     <label class="am-checkbox">
  109.       <input type="checkbox" name="cbx" value="im" data-am-ucheck> iMac
  110.     </label>
  111.     <label class="am-checkbox">
  112.       <input type="checkbox" name="cbx" value="mbp" data-am-ucheck> Macbook Pro
  113.     </label>
  114.     <label class="am-checkbox">
  115.       <input type="checkbox" name="cbx" value="sf" data-am-ucheck> 苏菲·麻索
  116.     </label>
  117.     <label class="am-checkbox">
  118.       <input type="checkbox" name="cbx" value="sur" data-am-ucheck> Surface
  119.     </label>
  120.     <label class="am-checkbox">
  121.       <input type="checkbox" name="cbx" value="rb" data-am-ucheck> Razer Blade
  122.     </label>
  123.   </div>
  124.   <div class="am-form-group">
  125.     <h3>性别 <sup class="am-text-danger">*</sup></h3>
  126.     <label class="am-radio">
  127.       <input type="radio" name="radio10" value="male" data-am-ucheck required> 男
  128.     </label>
  129.     <label class="am-radio">
  130.       <input type="radio" name="radio10" value="female" data-am-ucheck> 女
  131.     </label>
  132.     <label class="am-radio">
  133.       <input type="radio" name="radio10" value="pig" data-am-ucheck> 空
  134.     </label>
  135.     <div>
  136.       <div><button type="submit" class="am-btn am-btn-primary">提交</button></div>
  137. </form>

  139. </body>
  140. </html>
复制代码
效果图：

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

刘星宇

1

主题

67

回帖

157

积分

注册会员

积分
157
发表于 2024-6-6 08:10:16 | 显示全部楼层
我不确定这个信息的准确性，请再确认一下
回复 支持 反对

使用道具 举报

何星毅！

0

主题

61

回帖

123

积分

注册会员

积分
123
发表于 2024-6-21 06:46:13 | 显示全部楼层
牛逼
回复 支持 反对

使用道具 举报

青春不老666

1

主题

37

回帖

97

积分

注册会员

积分
97
发表于 2024-7-2 21:17:17 | 显示全部楼层
谢谢你的提醒，我会注意的。
回复 支持 反对

使用道具 举报

温馨小窝888

0

主题

51

回帖

100

积分

注册会员

积分
100
发表于 2024-7-11 00:25:43 | 显示全部楼层
看了LZ的帖子，我只想说一句很好很强大！
回复 支持 反对

使用道具 举报

努力变得更优秀

1

主题

55

回帖

133

积分

注册会员

积分
133
发表于 2024-7-27 09:22:11 | 显示全部楼层
我完全同意你的观点
回复 支持 反对

使用道具 举报

老納来自月亮

0

主题

39

回帖

79

积分

注册会员

积分
79
发表于 2024-8-6 14:25:55 | 显示全部楼层
同意！
回复 支持 反对

使用道具 举报

心情如诗2024

2

主题

48

回帖

120

积分

注册会员

积分
120
发表于 2024-9-6 06:30:34 | 显示全部楼层
友善的讨论氛围是非常重要的。
回复 支持 反对

使用道具 举报

吕布貂蝉

0

主题

43

回帖

87

积分

注册会员

积分
87
发表于 2024-9-13 12:25:06 | 显示全部楼层
保持尊重和礼貌对待其他成员是必要的。
回复 支持 反对

使用道具 举报

Halo

0

主题

41

回帖

83

积分

注册会员

积分
83
发表于 2024-9-16 15:25:05 | 显示全部楼层
牛逼
回复 支持 反对

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 09:19 , Processed in 0.093314 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表