<style>
.radiogroup {
font-size: 26px;
text-indent: 14px;
}
.radiogroup label {
vertical-align: middle;
}
.radiogroup .radiobtn {
display: inline-block;
margin-right: 20px;
}
.circular {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
border: 2px solid #dedfe0;
background: #fff;
vertical-align: middle;
}
.circular-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
margin: auto;
width: 16px;
height: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background: #009fe8;
}
.active .circular-inner {
display: block;
}
</style>
<div class="radiogroup">
<div class="radiobtn radiobtn-1">
<div class="circular">
<div class="circular-inner"></div>
</div>
<label>是</label>
</div>
<div class="radiobtn radiobtn-2">
<div class="circular">
<div class="circular-inner"></div>
</div>
<label>否</label>
</div>
</div>
<script>
function elementhasClassName(ele,className) {
var classReg= new RegExp('(^|\\s)'+className+'(\\s|$)');
return classReg.test(ele.className);
};
function addClass(ele,className) {
if (elementhasClassName(ele,className)) {
return;
} else if(ele.className === ''){
ele.className += className;
} else {
ele.className += ' '+className;
}
};
function removeClass(ele,cls) {
var regTxt='(^|\\s)'+cls+'(\\s|$)';
ele.className = ele.className.replace((new RegExp(regTxt)),"");
};
var radioGroup = document.querySelectorAll('.radiobtn');
for (var i = radioGroup.length - 1; i >= 0; i--) {
function bindEvent(ele){
ele.addEventListener('click',function(event) {
var target = event.currentTarget;
if (elementhasClassName(target,'radiobtn') && !elementhasClassName(target,'active')&& !elementhasClassName(target,'active')) {
var radioGroup = target.parentNode;
var radiobtnGroup =radioGroup.querySelectorAll('.radiobtn');
for (var i = radiobtnGroup.length - 1; i >= 0; i--) {
function remove(ele,currentTarget){
if (ele !== currentTarget && elementhasClassName(ele,'active')) {
removeClass(ele,'active');
};
};
remove(radiobtnGroup[i],target);
};
addClass(target,'active');
};
});
};
bindEvent(radioGroup[i]);
};
</script>