html中单选怎么写,HTML中的单选按钮问题（一）

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

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

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

如何获取单选框的值

如何设置单选框选中项

(这些内容都是我在写项目时 在性别选择上遇到的一些困难，希望能帮助到大家)

单选框的CSS样式修改

性别选择框

普通按钮

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

首先 我们创建两个radio

女

男

我们得到了两个普通按钮

普通按钮

修改代码

修改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中的一些操作 请至单选按钮问题(二)