AmazeUI如何实现单选框和多选框

tangjin

作者

这篇文章将为大家详细讲解有关AmazeUI如何实现单选框和多选框，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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">
<!--[if(gteIE9)|!(IE)]><!-->
<scriptsrc="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[iflteIE8]>
<scriptsrc="assets/ie8/jquery.min.js"></script>
<scriptsrc="assets/ie8/modernizr.js"></script>
<scriptsrc="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<scriptsrc="assets/js/amazeui.min.js"></script>
</head>
<bodystyle="padding:50px;">
<!--默认样式-->
<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-ucheckdisabled
checked>
禁用/已选中
</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-ucheckchecked
disabled>
禁用/已选中
</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>苏菲&middot;麻索
</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>

效果图：