Within my setup, I have a selection segment which includes seven checkboxes for each day of the week: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday. Additionally, there are two other sections featuring more checkbox options: Morning Session Section & Evening Session Section.
The functionality I am aiming for involves displaying both the Morning and Evening session sections if any day from Sunday to Friday is selected in the sessionDays checkbox group. However, if the Saturday or Sunday checkboxes are selected, only the Morning Session Section should be displayed.
I attempted to implement this behavior using the code snippet below, but encountered an issue where selecting Monday only displays the Morning and Evening sections while no other days trigger any display changes.
jQuery(function($){
//Assigning DIVs & Fields to variable
var sessionDays = $('.sessionDays');
var sessionSunday = $('#sessionSunday');
var sessionMonday = $('#sessionMonday');
var sessionTuesday = $('#sessionTuesday');
var sessionWednesday = $('#sessionWednesday');
var sessionThursday = $('#sessionThursday');
var sessionFriday = $('#sessionFriday');
var sessionSaturday = $('#sessionSaturday');
var sessionTime = $('.sessionTime');
var sessionMorning = $('.sessionMorning');
var eightnine = $('#eight-nine');
var nineten = $('#nine-ten');
var teneleven = $('#ten-eleven');
var eleventwelve = $('#eleven-twelve');
var sessionEvening = $('.sessionEvening');
var fourfive = $('#four-five');
var fivesix = $('#five-six');
var sixseven = $('#six-seven');
var seveneight = $('#seven-eight');
//Hide required DIVs
sessionEvening.hide();
sessionMorning.hide();
sessionDays.hide();
$("#selectSessionType").change(function(){
if( !$(this).val() ) {
sessionDays.hide();
} else {
sessionDays.show();
}
}).change();
$(sessionMonday, sessionTuesday, sessionWednesday, sessionThursday, sessionFriday).change(function() {
if( sessionMonday.is(':checked') == true || sessionTuesday.is(':checked') == true || sessionWednesday.is(':checked') == true || sessionThursday.is(':checked') == true || sessionFriday.is(':checked') == true ) {
sessionMorning.show();
sessionEvening.show();
} else if ( sessionSaturday.is(':checked') == true || sessionSunday.is(':checked') == true) {
sessionMorning.show();
} else {
sessionMorning.hide();
sessionEvening.hide();
}
});
});<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
... [Additional HTML code] ...
To view a working example, visit: https://jsfiddle.net/humanware/Lpmv5vyv/