0
点赞
收藏
分享

微信扫一扫

Web App 开发----复选框

林肯公园_97cc 2022-03-30 阅读 58
web app

checkbox常用于多选的情况,比如批量删除、添加群聊等

默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left类即可

若要禁用checkbox,只需在checkbox上增加disabled属性即可

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		 <h5>图标左侧对齐:</h5>
				<form class="mui-input-group">
					<div class="mui-input-row mui-checkbox mui-left">
						<label>选中状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox" checked />
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>可选状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox"  />
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>可选状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox"  />
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
						<label>禁用状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox"disabled />
					</div>
				</form>
				<h5>图标右侧对齐:</h5>
				<form class="mui-input-group" id="test">
					<div class="mui-input-row mui-checkbox mui-right">
						<label>选中状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox" checked/>
					</div>
					<div class="mui-input-row mui-checkbox mui-right">
						<label>可选状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox" />
					</div>
					<div class="mui-input-row mui-checkbox mui-right">
						<label>可选状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox" />
					</div>
					<div class="mui-input-row mui-checkbox mui-right">
						<label>禁用状态</label>
						<input type="checkbox" value="Itme 1" name="checkbox" disabled/>
					</div>
				</form>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

代码效果:

 

举报

相关推荐

0 条评论