Css实现checkbox及radio样式自定义

checkbox和radio样式自定义在网页中是很常见的， 比如在进行表单输入时性别的选择，用户注册时选择已阅读用户协议。随着用户对产品体验要求越来越高，我们都会对checkbox和radio重新设计，checkbox默认的样式非常丑 ，无法直接修改checkbox和radio的样式，这里我们借助label标签来对它进行样式美化。

先看实现效果图，如下：

实现思路

1.设置input 属性hidden对该input进行隐藏，或者通过display:none也可以

2.借助label for标签通过id绑定input ，这样在点击label时实际就是点击了input

3.定义label的样式，设置未选中状态的背景图
.advice{
height: 12px;
width: 12px;
display: inline-block;
background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-top: -4px;
}
4.使用相邻选择器设置选中状态label的样式
input[type="radio"]:checked + .advice{
background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
}

实现代码

请选择反馈的问题：

问题


建议

1

以上是radio单选框的实现代码，checkbox也是类似 将input type定义成checkbox即可

获取radio及checkbox选中的值

1.获取radio的值
使用jquery获取radio的值有3种方式：
$('input