<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="container"> <div class="row"> <h2>Beautify Checkboxes and Radio Input Group Addons</h2> </div> <div class="row"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon beautiful"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon beautiful"> <input type="radio"> </span> <input type="text" class="form-control"> </div> </div> </div> </div> </div>

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); .input-group-addon.beautiful input[type="checkbox"], .input-group-addon.beautiful input[type="radio"] { display: none; }

$(function () { $('.input-group-addon.beautiful').each(function () { var $widget = $(this), $input = $widget.find('input'), type = $input.attr('type'); settings = { checkbox: { on: { icon: 'fa fa-check-circle-o fa-lg' }, off: { icon: 'fa fa-circle-o fa-lg' } }, radio: { on: { icon: 'fa fa-dot-circle-o fa-lg' }, off: { icon: 'fa fa-circle-o fa-lg' } } }; $widget.prepend('<span class="' + settings[type].off.icon + '"></span>'); $widget.on('click', function () { $input.prop('checked', !$input.is(':checked')); updateDisplay(); }); function updateDisplay() { var isChecked = $input.is(':checked') ? 'on' : 'off'; $widget.find('.fa').attr('class', settings[type][isChecked].icon); //Just for desplay isChecked = $input.is(':checked') ? 'checked' : 'not Checked'; $widget.closest('.input-group').find('input[type="text"]').val('Input is currently ' + isChecked) } updateDisplay(); }); });