html自定义修改单选框多选框样式以及获取选中的值

如何定义一个单选框

            <input type="radio" name="sex" id="male" value="1" /> 

定义type，一组单选框的name值是相同的，定义id可以让label标签指向这个元素，value是我们赋予这个单选框我们需要的值

单选框是有默认样式的无法被修改，只能将他隐藏通过label标签来模拟新的样式
代码如下：

      <style>
                input[type='radio'][name='sex']{display: none;}/* 隐藏默认单选框用label来模拟 */
                input[type='radio'][name='sex']+label:after{/* 给label标签添加自定义样式 */
                    content: '';
                    display: inline-block;
                    margin-left: 10px;
                    width: 10px;
                    height: 10px;
                    border: 1px solid #0000CC;
                    }
                input[type='