custom radio and checkbox

by Nikhil krishnan

HTML

<div class="form-group">
    <label for="">When do you need it? <sup>*</sup>
    </label>
    <div class="custom-radio">
        <input type="radio" checked id="needIt01" name="needIt" />
        <label for="needIt01" class="checked"><span></span>Not Sure Yet</label>
    </div>
    <div class="custom-radio">
        <input type="radio" id="needIt02" name="needIt" />
        <label for="needIt02"><span></span>I have a date</label>
    </div>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"/>Check me out</label>
</div>

CSS

/*checkbox*/
.checkbox{
    margin-top:50px;
}
.checkbox label{
    padding-left:10px;
    background: url(https://support.content.office.net/en-us/media/b13973ad-a14a-4591-82e2-2e09d5c8958d.gif) no-repeat left center;    
}
.checkbox input{
    opacity:0;
}
.checkbox.checked label{
    background: url(https://support.content.office.net/en-US/media/56185d18-021a-4d65-a08d-904823bafd2a.gif) no-repeat left center;
}

/* custom radio button*/
 .custom-radio input[type="radio"] {
    /*display:none;*/
    opacity: 0;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.custom-radio input[type="radio"] + label {
    color: #666666;
    font-weight: normal;
    font-size:14px;
    cursor:pointer;
}
.custom-radio input[type="radio"] + label span {
    display:inline-block;
    width:21px;
    height:20px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.custom-radio label span {
    background: url(https://support.content.office.net/en-us/media/b13973ad-a14a-4591-82e2-2e09d5c8958d.gif) no-repeat center center;
}
.custom-radio label.checked span {
    background: url(https://support.content.office.net/en-US/media/56185d18-021a-4d65-a08d-904823bafd2a.gif) no-repeat center center;
}

JavaScript

//custom radio button using jquery
$('.custom-radio').click(function () {
    if ($(this).find('input').is(":checked")) {
        $(this).parent('.form-group').find('label').removeClass('checked');
        $(this).find('label').addClass('checked');
    }
});

//custom checkbox
$('.checkbox input').prop("checked", false);
$('.checkbox').click(function () {
    if ($(this).find('input').is(":checked")) {
        $(this).addClass('checked');
    }else{
        $(this).removeClass('checked');
    }
});