<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/awesome-bootstrap-checkbox/v0.2.3/awesome-bootstrap-checkbox.css"
rel="stylesheet">
<style>
.checkbox label::before {
content:"";
display:inline-block;
position:absolute;
width:16px;
height:16px;
left:0;
margin-left:-20px;
border:1px solid #cccccc;
border-radius:3px;
background-color:#fff;
-webkit-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition:border 0.15s ease-in-out, color 0.15s ease-in-out;
transition:border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display:inline-block;
position:absolute;
width:18px;
height:18px;
left:0;
top:2px;
color:white;
font-size:10px;
margin-left:-20px;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity:0;
z-index:1;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
background-color:#5FB878;
border-color:#5FB878;
}
.checkbox input[type="checkbox"]:checked + label::before,
.checkbox input[type="radio"]:checked + label::before {
background-color:#5FB878;
border-color:#5FB878;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
font-family:"FontAwesome";
content:"\f00c";
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity:0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color:#eeeeee;
cursor:not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius:50%;
}
.radio, .checkbox {
position:relative;
display:unset !important;
margin-top:0px;
margin-bottom:0px;
}
</style>
</head>
<body>
<div class="" style="display:inline-block;margin-top:20px;position:absolute;">
<span class="checkbox checkbox-circle">
<input id="radio1" class="styled" type="radio" name="radio" checked="" value="1" autocomplete="off">
<label for="radio1" class="font-bolder"> </label>
</span>
<span class="checkbox checkbox-circle">
<input id="radio2" class="styled" type="radio" name="radio" autocomplete="off">
<label for="radio2" class="font-bolder"></label>
</span>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
$('#radio1').click(function () {
$(this).val('1');
$('#radio2').val('on');
});
$('#radio2').click(function () {
$(this).val('1');
$('#radio1').val('on');
});
</script>
</body>
</html>
