I am currently working on an asp.net webform and attempting to style my checkbox similar to the design shown here:
When I try to replicate the HTML and JS code from the above link on my page, it does not seem to be functioning properly, most likely due to missing CSS or other elements...
Could someone kindly provide a comprehensive example (including HTML, CSS, and script) of what I need to add to my page in order to achieve the checkbox appearance depicted in the image above?
Here is the code snippet from the aforementioned link, which can also be tested here: http://jsfiddle.net/DcYhf/65/
However, when I implement it on my own page, it does not seem to work properly...
HTML
<span class="button-checkbox">
<button type="button" class="btn btn-lg" data-color="primary">Primary</button>
<input type="checkbox" class="hidden" checked />
</span>
JS
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
This is my current implementation: