<!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 单选框和多选框的实现示例，分享给大家，也给自己留个笔记，具体如下： <!doctype html> <html class=no-js> <head> <meta charset=utf-8> <meta ...
AmazeUI 是一个由中国团队开发的、专为移动设备优化的开源前端框架，它支持响应式设计，能很好地适应不同屏幕尺寸的设备，如手机、平板和桌面电脑。在网页设计中，按钮作为用户与页面交互的关键元素，AmazeUI 提供了...
- **表单**：包括输入框、选择器、复选框、单选按钮等，都进行了样式统一和交互优化，提升用户体验。 - **按钮**：提供不同大小、颜色、形状的按钮，以及加载状态和禁用状态的处理。 - **模态框**（Modal）：用于...
2. 表单：模板中可能包含了各种类型的表单元素，如输入框、下拉选择、复选框、单选按钮等，以及表单验证功能，方便用户输入和提交数据。 3. 按钮：AmazeUI提供多种样式的按钮，包括大小、颜色、形状等，满足不同的...
它包含了一系列可自定义的UI元素，如文本、图像、按钮、滑块等，而复选框和单选框就是其中的一部分。 二、复选框（CheckBox） 1. 创建复选框：在Unity编辑器的Inspector窗口中，可以通过添加“Toggle”组件到...
在网页设计中，单选框（Radio Button）和复选框（Checkbox）是常见的用户交互元素，用于收集用户的多选或单选信息。然而，原生的HTML单选框和复选框样式往往较为单一，视觉效果可能不符合现代网页设计的要求。jQuery...
本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何结合实际项目进行应用。 一、jQuery EasyUI 1.4.5简介 EasyUI是一套基于jQuery的UI框架，它包含了多个可复用的UI组件，如...
单选框和多选框组件通常用于提供一组可选的选项，用户可以从中选择一个（单选框）或多个（多选框）。 单选框在用户界面设计中常见于需要用户做出唯一选择的情况，如性别选项。而多选框则用于用户可以同时选择多个...
总的来说，单选框和复选框是C#编程中不可或缺的UI元素，它们能有效地帮助用户进行选择，同时也方便开发者获取用户的输入。熟练掌握这两者的使用，将对提升软件的用户体验和功能完整性起到关键作用。在实际项目中，...
在网页设计中，单选框（Radio Button）和复选框（Checkbox）是常见的用户界面元素，用于收集用户的选择信息。这些元素的样式通常由浏览器默认提供，但往往较为单一，不能满足设计师对于美观和品牌一致性的需求。本...
- **admin-form.html**：这可能是演示如何使用AMazeUI创建表单的页面，包括输入框、复选框、单选按钮等元素，以及验证和提交功能。 - **admin-log.html**：可能是展示日志或操作记录的页面，可能使用了AMazeUI的...
在网页设计中，单选框（Radio Button）和复选框（Checkbox）是常见的用户界面元素，用于收集用户的选择信息。这些元素的样式通常由浏览器默认定义，但为了提升用户体验和界面美观度，设计师和开发者常常需要自定义...
表单组件包括输入框、单选按钮、多选按钮、下拉选择框、日期选择器等，这些都支持自定义样式和配置，以满足不同项目的需求。 AmazeUI的表单支持验证功能，可以对用户输入的数据进行实时检查，例如验证邮箱格式、...
在Android应用开发中，用户界面的设计至关重要，其中单选框（RadioButtons）、复选框（CheckBoxes）和下拉框（Spinner）是常见的交互元素，它们用于收集用户的选择信息或控制用户界面的状态。本教程将深入讲解这三种...
在这个项目中，CSS3的这些特性被巧妙地应用到单选框和复选框上，使得这些元素在页面上显得既现代又精致。 首先，CSS3的伪类选择器如`:checked`、`:hover`和`:active`被用来实现不同状态下的样式变化。例如，当单选...
本教程将围绕“jQuery单选框跟复选框美化代码”这一主题，探讨如何利用jQuery和CSS技术对这些元素进行美化。 首先，我们要理解HTML中的单选框和复选框基本结构。单选框用于提供一组可选的选项，用户只能选择其中一...
在本文中，我们将深入探讨如何使用jQuery来美化单选框和复选框，以及相关的UI设计技巧。这个压缩包文件“jQuery单选框和复选框美化代码.zip”包含了一个名为“ui-choose.js”的JavaScript插件，它专门用于改善网页...
jquery操作单选框和复选框，超级实用的示例，节约项目开发时间！
AmazeUI提供了各种表单元素，如文本输入框、选择器、日期选择器、多选框、单选框等，并且支持验证功能，确保数据的完整性和准确性。 3. **数据表格页**：数据展示和操作是后台管理的核心部分，AmazeUI的数据表格...