I'm currently working on a jQuery function that is acting as a select-all option. Everything is functioning correctly except that when I deselect any of the child elements from select all, the option remains enabled. My goal is to enable or disable the select all option based on the selection status of the children. Below is my code snippet:
$('#show_ntf_all').click(function() {
if (!$(this).hasClass('check')) {
$('.show_ntf').addClass('check');
$(this).addClass('check');
} else {
$('.show_ntf').removeClass('check');
$(this).removeClass('check');
}
});
$('.sep_fld').on('click', '.show_ntf', function() {
if ($(this).hasClass('check')) {
var check_length = $('.show_ntf').filter(".check").length;
var show_length = $('.show_ntf').length;
console.log(check_length);
console.log(show_length);
var check = check_length == show_length;
$(this).removeClass('check')
if (check == true) {
$('#show_ntf_all').addClass('check');
} else {
$('#show_ntf_all').removeClass('check');
}
} else {
$(this).addClass('check')
}
});ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
padding: 5px 0px;
margin: 0;
}
#show_ntf_all {
margin-bottom: 20px;
}
li label {
color: #aaa;
}
li.check label {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='sett_field notif_all'>
<ul>
<li class="" id="show_ntf_all">
<label>select all</label>
</li>
</ul>
</div>
<div class='sett_field sep_fld'>
<ul>
<li class="show_ntf">
<label>Show Notification</label>
</li>
</ul>
</div>
<div class='sett_field sep_fld'>
<ul>
<li class="show_ntf">
<label>Show Notification</label>
</li>
</ul>
</div>
<div class='sett_field sep_fld'>
<ul>
<li class="show_ntf">
<label>Show Notification</label>
</li>
</ul>
</div>
<div class='sett_field sep_fld'>
<ul>
<li class="show_ntf">
<label>Show Notification</label>
</li>
</ul>
</div>I appreciate any assistance in advance.