优秀前端工程师必备:" 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

posted @   前端邢晋宇  阅读(318)  评论(0编辑  收藏  举报
编辑推荐:
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
阅读排行:
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(一):从.NET IoT入
· .NET 开发的分流抢票软件,不做广告、不收集隐私
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 实现windows下简单的自动化窗口管理
· 前端实现 HTML 网页转 PDF 并导出
点击右上角即可分享
微信分享提示