作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More
【单选框特点】
1）单选框，一般为小圆圈 <br/>
2）左边的单选框，右边是文本 <br/>
3）单选框和文本为水平居中 <br/>
4）多个选项，则一般只可选中一个 <br/>
5）选中和不选中状态样式 <br/>
【静态布局】
1）先设置一个父标签div，设置div标签为即是块元素也是行内元素，display:inline-block，以及按钮样式cursor:pointer，高宽度由子标签决定 <br/>
2）然后再设置两个子标签span，左边span标签可设置高宽度inline-block，右边span直接设置文本 <br/>
3）左边span标签设置20px高宽度，以及边框样式border-radius同样设置20px，达到圆形形状
- 效果
- 代码
<div style="display:inline-block;cursor:pointer;">
<span style="display:inline-block;width:20px;height:20px;border-radius:20px;background:#fff;border:1px solid #ccc;"></span>
<span>男</span>
</div>4）从上面效果看，很明显，单选框稍微大了一点，同时框和文本不在同一水平上，体验效果不佳 <br/>
5）重现调整框，设置14px高宽度以及边框值，同时设置垂直居中样式 <br/>
- 效果
- 代码
<div style="display:inline-block;cursor:pointer;">
<span style="vertical-align:middle;display:inline-block;width:14px;height:14px;border-radius:14px;background:#fff;border:1px solid #ccc;"></span>
<span style="vertical-align:middle;">男</span>
</div>【交互设置】
1）设置单选框class值，然后绑定框点击事件 <br/>
2）将style样式放到class里，同时设置多一个选中class <br/>
3）选中class样式，图标和文本均变为蓝色 <br/>
4）选中class样式下的图标class样式添加一个:after选择器 <br/>
5）在选择器中，设置一个空格内容，父级设置绝对定位，选择器里设置相对父级定位，高宽度和边框设置为8px，以及top和left值，以及蓝色背景 <br/>
- 选中效果
<style type="text/css">
.radio-div {
display: inline-block;
cursor: pointer;
margin-right: 10px;
}
.radio-div .icon {
vertical-align: middle;
display: inline-block;
width: 14px;
height: 14px;
border-radius: 14px;
background: #fff;
border: 1px solid #ccc;
}
.radio-div .text {
vertical-align: middle;
}
.radio-action-div .icon {
border: 1px solid #099dff;
position: relative;
}
.radio-action-div .icon::after {
content: ' ';
position: absolute;
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border-radius: 8px;
display: inline-block;
background: #099dff;
}
.radio-action-div .text {
color: #099dff;
}
</style>
<!--单选框-->
<div class="radio-div radio-action-div" data-value="1">
<span class="icon"></span>
<span class="text" style="">男</span>
</div>
<!--单选框-->
<div class="radio-div" data-value="0">
<span class="icon"></span>
<span class="text" style="">女</span>
</div>6）设置js交互，可来回切换，以及data-value选中的值
- 效果
- 代码
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".radio-div").click(function () {
var value = $(this).attr("data-value");
$(".radio-div").removeClass('radio-action-div');
$(this).addClass('radio-action-div');
console.log(value);
});
});
</script>
