优秀前端工程师必备:" checkbox & radio--单钩 & 多钩 "大比较
1 单选: type="radio"
需求: 男女input只能选择一个
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
2 多选: type="checkbox"
<input type="checkbox" title="吃饭" >吃饭
<input type="checkbox" title="睡觉" >睡觉
<input type="checkbox" title="打豆豆">打豆豆
3 自定义勾选图片的input:
需求: 勾选时, 自定义勾选图片且单独勾选
h5:
<span class="cheSpan">
<input type="radio" class="check" id="aaa" name="card">
<label for="aaa"></label>
</span>
css
.cheSpan {
position: relative;
margin-right: 37px;
}
.cheSpan .check {
position: absolute;
width: 16px;
height: 16px;
visibility: hidden;
}
.cheSpan .check+label {
display: inline-block;
width: 16px;
height: 16px;
background: url("../images/emptyPoint.png") no-repeat center center;
border: 1px solid #898989;
border-radius: 50%;
margin-bottom: -3px;
cursor: pointer;
}
.cheSpan .check:checked+label {
background: url("../images/clickPoint.png") no-repeat center center;
background-size: 16px 16px;
}
转载请注明出处:https://www.cnblogs.com/autoXingJY/p/10495759.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(一):从.NET IoT入
· .NET 开发的分流抢票软件,不做广告、不收集隐私
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 实现windows下简单的自动化窗口管理
· 前端实现 HTML 网页转 PDF 并导出