"Beautify Checkboxes & Radio Input Group Addons"
Bootstrap 3.1.0 Snippet by mouse0270

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
@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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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' },
off: { icon: 'fa fa-circle-o' }
},
radio: {
on: { icon: 'fa fa-dot-circle-o' },
off: { icon: 'fa fa-circle-o' }
}
};
$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();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Awesome work, defiantly using this

Luke Brown () - 9 years ago - Reply 0


nice

mostafijur () - 10 years ago - Reply 0


Genius :D

Moin Akbar () - 10 years ago - Reply 0


Nice great work

MrSaooty a été supprimé () - 10 years ago - Reply 0