I have implemented some visually appealing "checkboxes" using li, span, and bootstrap glyphicon elements. These checkboxes display an active state when checked by adding the .active class.
Upon activation of the active class, a hidden div beneath the bootstrap-styled checkbox is revealed, containing additional checkboxes.
The issue arises when a user checks the smaller checkboxes, but then unchecks the main bootstrap checkbox. Even though the smaller checkboxes are hidden, they remain checked. This leads to unwanted data being recorded in the database by the PHP backend code.
My initial thought was to use prop("checked", "false"); on the smaller checkboxes when the bootstrap checkbox is inactive. However, the challenge lies in the fact that these checkboxes are dynamically generated, and there could be multiple instances of the main checkbox revealing hidden checkboxes.
Enough explanation, let's move on to the solution. Here is a jsfiddle link: http://jsfiddle.net/5fw60gLv/1/
Just for demonstration purposes, I have included 2 main checkboxes that unveil hidden divs with additional checkboxes.
Below is the jQuery code I'm utilizing to reveal and hide the hidden divs, as well as uncheck the checkboxes:
$('li.level-1-checkbox').click(function () {
if ($(this).hasClass('active')) {
$(this).next().fadeIn(300);
} else {
$('.level-1-checkbox').find('div').prop('checked', false);
$(this).next().fadeOut(300);
}
});