-
Set up an event listener for your custom lists. Make sure to target the appropriate list if you have multiple lists on the same page/form and want to use different styling for each.
$('.custom-checklist').on('click', '[type="checkbox"], [type="radio"]', function() {});
-
Check whether the list being interacted with is a checkbox list or radio button list, and if it is a checkbox list, check whether the checkbox is being checked or unchecked.
$('.custom-checklist').on('click', '[type="checkbox"], [type="radio"]', function() {
if ($(this).attr('type') == 'checkbox') { // checkbox list
if ($(this).is(':checked')) {} // checkbox being checked
} else {} // checkbox being unchecked
else if ($(this).attr('type') == 'radio') {} // radio button list
});
-
On click, if the checkbox/radio is being checked, apply the checked styling using the data-icon and data-prefix attributes on the dynamically generated SVG element for that icon. If you are using a radio button list, make sure to
unstyle all sibling radio buttons within the adjacent labels, and if a checkbox is being unchecked, apply the unchecked styling the same way as checked.
$('.custom-checklist').on('click', '[type="checkbox"], [type="radio"]', function() {
if ($(this).attr('type') == 'checkbox') { // checkbox list
if ($(this).is(':checked')) { // checkbox being checked, style as checked
$(this).siblings('[data-icon]')
.attr({
'data-icon': 'check-square',
'data-prefix': 'fas'
})
.parent().addClass('checked');
} else { // checkbox being unchecked, style as unchecked
$(this).siblings('[data-icon]')
.attr({
'data-icon': 'square',
'data-prefix': 'far'
})
.parent().removeClass('checked');
}
} else if ($(this).attr('type') == 'radio') { // radio button list
$(this).siblings('[data-icon]')
.attr({
'data-icon': 'dot-circle',
'data-prefix': 'fas'
})
.parent()
.addClass('checked')
.siblings().each(function() {
$(this)
.removeClass('checked');
.children('[data-icon]')
.attr({
'data-icon': 'circle',
'data-prefix': 'far'
});
});
}
});
-
If you are using Font Awesome 5's CSS solution instead of the standard JS+SVG solution, simply modify this function to work with the Font Awesome 5 classes and weights as explained in the Font Awesome 5's official CSS documentation
$('.custom-checklist').on('click', '[type="checkbox"], [type="radio"]', function() {
if ($(this).attr('type') == 'checkbox') { // checkbox list
if ($(this).is(':checked')) { // checkbox being checked, style as checked
$(this).siblings('i')
.removeClass('far, fa-square')
.addClass('fas, fa-check-square')
.parent().addClass('checked');
} else { // checkbox being unchecked, style as unchecked
$(this).siblings('i')
.removeClass('fas, fa-check-square')
.addClass('far, fa-square')
.parent().removeClass('checked');
}
} else if ($(this).attr('type') == 'radio') { // radio button list
$(this).siblings('i')
.removeClass('far, fa-circle')
.addClass('fas, fa-dot-circle')
.parent()
.addClass('checked')
.siblings().each(function() {
$(this)
.removeClass('checked');
.children('i')
.removeClass('fas, fa-dot-circle')
.addClass('far, fa-circle')
});
}
});
-
To build a custom checklist with different icons, set the different icons in the HTML and then change the weight of the icons from fal/far to fas to fill the icon when checked or selected. Any additional stylistic customizations can
be made your CSS stylesheet. For a more robust demonstration of how this code would be built out, look at and play with the JavaScript for this code.
The web is a beautiful place if you'd only open your browser. Checklists should be no exception. Want to take it one step further? Check out Codrops article on SVG animated checklists.
