<body>
<input type="radio" name="gender" id="man" value="male" oninput="ss()">
<label for="man" style="color: #666666;">男</label>&nbsp;&nbsp;
<input type="radio" name="gender" id="woman" value="female" oninput="uu()">
<lable for="woman" style="color: #666666">女</lable>
<script type="text/javascript">
function ss(){
var vv=$('input:radio:checked').val()
console.log(vv)
}
function uu(){
var vv=$('input:radio:checked').val()
console.log(vv)
}
</script>

</body>

 

改变单选框的样式：

html代码：

<div class="sexMan">
<input type="radio" class="" id="sexNan" name="pd-sex">
<label for="sexNan">男</label>
</div>
<div class="sexWomen">
<input type="radio" class="" id="sexNv" name="pd-sex">
<label for="sexNv">女</label>
</div>

css代码：

[type='radio'] {
display: none;
}

[type='radio'] + label::before {
content: '';
background: #fff;
border: 5px solid gray;;
width: 20px;
height: 20px;
border-radius: 50%;
float: left;
margin-right: 6px;
margin-top: -1px;
}

[type='radio']:checked + label::before {
background: #fff;
border: 5px solid #fe6200;
width: 20px;
height: 20px;
border-radius: 50%;
float: left;
margin-right: 6px;
margin-top: -1px;
}