HTML中的单选按钮问题（一）

1.如何修改单选按钮的css样式

2. 如何只选中众多按钮中的一个按钮

3. jquery中关于单选按钮的一些操作

• 如何获取单选框的值
• 如何设置单选框选中项
  （这些内容都是我在写项目时 在性别选择上遇到的一些困难，希望能帮助到大家）

---

单选框的CSS样式修改

性别选择框

普通按钮

最终做出来是这样的样式 是不是比普通的单选按钮好看了很多？！

首先 我们创建两个radio

女
男

我们得到了两个普通按钮

普通按钮

修改代码

修改css

1.隐藏单选按钮框

input{
display:none;
}

2. 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中的一些操作 请至单选按钮问题（二）