html5如何使用AmazeUI实现单选框和多选框

2024-10-26 技术教程

这篇文章主要为大家展示了“html5如何使用AmazeUI实现单选框和多选框”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html5如何使用AmazeUI实现单选框和多选框”这篇文章吧。

具体如下：

<!doctypehtml><htmlclass="no-js"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><title>单选框和多选框</title><linkrel="stylesheet"href="assets/css/amazeui.min.css"><scriptsrc="assets/js/jquery.min.js"></script><scriptsrc="assets/js/amazeui.min.js"></script></head><body><divclass="am-g"><divclass="am-u-sm-6"><h4>复选框</h4><labelclass="am-checkbox"><inputtype="checkbox"value=""data-am-ucheck>没有选中</label><labelclass="am-checkbox"><inputtype="checkbox"checked="checked"value=""data-am-ucheckchecked>已选中</label><labelclass="am-checkbox"><inputtype="checkbox"value=""data-am-ucheckdisabled>禁用/未选中</label><labelclass="am-checkbox"><inputtype="checkbox"checked="checked"value=""data-am-ucheckdisabledchecked>禁用/已选中</label></div><divclass="am-u-sm-6"><h4>单选框</h4><labelclass="am-radio"><inputtype="radio"name="radio1"value=""data-am-ucheck>未选中</label><labelclass="am-radio"><inputtype="radio"name="radio1"value=""data-am-ucheckchecked>已选中</label><labelclass="am-radio"><inputtype="radio"name="radio2"value=""data-am-ucheckdisabled>禁用/未选中</label><labelclass="am-radio"><inputtype="radio"name="radio2"value=""data-am-ucheckcheckeddisabled>禁用/已选中</label></div></div><labelclass="am-checkboxam-secondary"><inputtype="checkbox"value=""data-am-ucheck>没有选中</label><labelclass="am-checkboxam-secondary"><inputtype="checkbox"checked="checked"value=""data-am-ucheckchecked>已选中</label><labelclass="am-radioam-secondary"><inputtype="radio"name="radio3"value=""data-am-ucheck>未选中</label><labelclass="am-radioam-secondary"><inputtype="radio"name="radio3"value=""data-am-ucheckchecked>已选中</label><divclass="am-form-group"><h4>装备</h4><labelclass="am-checkbox-inline"><inputtype="checkbox"value=""data-am-ucheck>iPhone</label><labelclass="am-checkbox-inline"><inputtype="checkbox"value=""data-am-ucheck>iMac</label><labelclass="am-checkbox-inline"><inputtype="checkbox"value=""data-am-ucheck>Macbook</label></div><divclass="am-form-group"><h4>性别</h4><labelclass="am-radio-inline"><inputtype="radio"name="radio10"value="male"data-am-ucheck>男</label><labelclass="am-radio-inline"><inputtype="radio"name="radio10"value="female"data-am-ucheck>女</label><labelclass="am-radio-inline"><inputtype="radio"name="radio10"value="pig"data-am-ucheck>空</label></div><formclass="am-form"data-am-validator><divclass="am-form-group"><h4>装备<supclass="am-text-danger">*</sup>（至少2项，至多4项）</h4><labelclass="am-checkbox"><inputtype="checkbox"name="cbx"value="ip"data-am-ucheckrequiredminchecked="2"maxchecked="4">iPhone</label><labelclass="am-checkbox"><inputtype="checkbox"name="cbx"value="im"data-am-ucheck>iMac</label><labelclass="am-checkbox"><inputtype="checkbox"name="cbx"value="mbp"data-am-ucheck>MacbookPro</label><labelclass="am-checkbox"><inputtype="checkbox"name="cbx"value="sf"data-am-ucheck>苏菲·麻索</label><labelclass="am-checkbox"><inputtype="checkbox"name="cbx"value="sur"data-am-ucheck>Surface</label><labelclass="am-checkbox"><inputtype="checkbox"name="cbx"value="rb"data-am-ucheck>RazerBlade</label></div><divclass="am-form-group"><h4>性别<supclass="am-text-danger">*</sup></h4><labelclass="am-radio"><inputtype="radio"name="radio10"value="male"data-am-ucheckrequired>男</label><labelclass="am-radio"><inputtype="radio"name="radio10"value="female"data-am-ucheck>女</label><labelclass="am-radio"><inputtype="radio"name="radio10"value="pig"data-am-ucheck>空</label><div><div><buttontype="submit"class="am-btnam-btn-primary">提交</button></div></form></body></html>

以上是“html5如何使用AmazeUI实现单选框和多选框”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！