1.如何修改单选按钮的css样式
2. 如何只选中众多按钮中的一个按钮
3. jquery中关于单选按钮的一些操作
- 如何获取单选框的值
- 如何设置单选框选中项
（这些内容都是我在写项目时 在性别选择上遇到的一些困难，希望能帮助到大家）
单选框的CSS样式修改
性别选择框
普通按钮
最终做出来是这样的样式 是不是比普通的单选按钮好看了很多？！
首先 我们创建两个radio
<input type="radio" id="female">女
<input type="radio" id="male">男
我们得到了两个普通按钮
普通按钮
修改代码
<input type="radio" id="female"><span></span>
<input type="radio" id="male"><span></span>
修改css
1.隐藏单选按钮框
input{
display:none;
}
-
span是我们要放我们图片的地方 修改其css样式以便适应我们的按钮大小
(改块内容仅做参考,主要是input[type=radio]+span)
input[type=radio]+span {
width: 40px;
height: 40px;
display: inline-block;
margin-right: 5px;
background-size: cover;
}
2.为各个按钮添加图片
#female[type=radio]+span{
background-image: url("../res/girl.png");
background-repeat: no-repeat;
}
#male[type=radio]+span{
background-image: url("../res/boy.png");
background-repeat: no-repeat;
}
3.最后我们还可以添加选中时的样式
input[type=radio]:checked+span{
border: 1px solid #ffffff;
border-radius: 5px;
}
最后运行就得到了我们想要的单选样式
注意：多选框的修改可以参考单选框 只要将[type=radio]改为[type=checked]即可！
其实在最后点击时还出现了一些问题 两个单选框都可以选择!!!
我们只要在每个单选框中 加入name="sex"即可
相同name的单选框组 只能选择其中的一个
最后问题解决！！！
jq中的一些操作 请至单选按钮问题（二）
