• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

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

    发布者: 网神之王 | 发布时间: 2025-6-16 12:35| 查看数: 115| 评论数: 0|帖子模式

    本文主要介绍了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 单选框和多选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！


    来源：https://www.jb51.net/html5/741151.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

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

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

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