<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="pading-bottom"> <div class="left-radio" id="insuranceswitchON"> <div class="custom-radio"> <label class="r-wrap"> <span class="spaceing-left"><strong>YES</strong> <small>add Trip Protection to my itinerary</small></span> <input type="radio" name="yes"> <span class="checkmark"></span> </label> </div> </div> <div class="left-radio pull-right" id="insuranceswitchOFF"> <div class="custom-radio"> <label class="r-wrap"> <span class="spaceing-left"><strong>NO</strong> <small>I don’t want Trip Protection</small></span> <input type="radio" name="yes"> <span class="checkmark"></span> </label> </div> </div> </div>

.pading-bottom { padding-bottom: 60px;float:left;width:100%;} .left-radio {width:48%;float:left;}.left-radio {width:48%;float:left;} .custom-radio {width:100%;float:left; background:#e6e6e6;padding:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;position: relative; height: 56px;} .left-radio.yes .custom-radio{background:#aeca69;} /* Hide the browser's default checkbox */ .r-wrap input { position: absolute; opacity: 0; } .left-radio.pull-right.yes .custom-radio{background:#ffc1ae;} /* Create a custom checkbox */ .checkmark { position: absolute; top: 50%; left: 8px; height: 25px; width: 25px; background-color: #fff; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); } /* On mouse-over, add a grey background color */ .r-wrap:hover input ~ .checkmark { background-color: #fff; } /* When the checkbox is checked, add a blue background */ .r-wrap input:checked ~ .checkmark { /*background-color: #2196F3;*/ } /* Create the checkmark/indicator (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .r-wrap input:checked ~ .checkmark:after { display: block; background:url(http://www.vtechindustries.com.au/greentick.gif) no-repeat; width:21px;height:23px; } #insuranceswitchOFF .r-wrap input:checked ~ .checkmark:after { display: block; background:url(http://mojim.com/gif/X.gif) no-repeat; width:21px;height:23px; top:4px; } /* Style the checkmark/indicator */ .r-wrap .checkmark:after { left: 4px; top: -3px; width: 5px; height: 10px; /* border: solid white; */ border-width: 0 3px 3px 0; /* -webkit-transform: rotate(45deg); */ -ms-transform: rotate(45deg); /* transform: rotate(45deg); */ background: #fff; } .spaceing-left {padding-left:35px;float:left;width:100%;} .spaceing-left small{font-size: 80%;display: block;}

$('.pading-bottom .left-radio').click(function () { $(this).addClass('yes'); $(this).siblings().removeClass('yes'); });