【发布时间】：2018-10-29 07:35:59
【问题描述】：
我有一个包含七个复选框的部分，它们是星期日、星期一、星期二、星期三、星期四、星期五和星期六。我还有另外两个带有其他复选框的部分，它们是上午会议部分和晚上会议部分。
现在我需要做的是，如果有人在 sessionDays 中选择从周日到周五的任何一天，那么它应该同时显示早课部分和晚会部分。但如果有人选择周六或周日复选框，它应该只显示上午会议部分。
我曾尝试使用以下代码执行此操作，但它仅在星期一选择中显示早晚部分。如果选择了其他日期，它不会显示任何内容。
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 = $('#teneleven');
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>
<div class="age underEighteen">
<h3>Under 18 Class Selection</h3>
<div class="form-row">
<div class="form-group col-md-4">
<label for="selectSessionType">Choose Session Type <span>*</span></label>
<select class="form-control" id="selectSessionType">
<option selected="selected" value="">Select Session Type</option>
<option value="beginners">Beginners</option>
<option value="hourly">Hourly</option>
<option value="monthly">Monthly</option>
</select>
</div>
<div class="form-group col-md-4">
<div class="days sessionDays">
<label>Select Session Days</label>
<p class="text-muted">Select the specific days you want to come for training.</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sessionSunday">
<label class="form-check-label" for="sessionSunday">
Sunday
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sessionMonday">
<label class="form-check-label" for="sessionMonday">
Monday
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sessionTuesday">
<label class="form-check-label" for="sessionTuesday">
Tuesday
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sessionWednesday">
<label class="form-check-label" for="sessionWednesday">
Wednesday
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sessionThursday">
<label class="form-check-label" for="sessionThursday">
Thursday
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sessionFriday">
<label class="form-check-label" for="sessionFriday">
Friday
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="sessionSaturday">
<label class="form-check-label" for="sessionSaturday">
Saturday
</label>
</div>
</div>
</div>
<div class="form-group col-md-4">
<div class="sessionTime">
<div class="sessionMorning">
<label>Select Session Time</label>
<p style="font-weight:bold;">Morning Session</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="eight-nine">
<label class="form-check-label" for="eight-nine">8:00 AM - 9:00 AM</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="nine-ten">
<label class="form-check-label" for="nine-ten">9:00 AM - 10:00 AM</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ten-eleven">
<label class="form-check-label" for="ten-eleven">10:00 AM - 11:00 AM</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="eleven-twelve">
<label class="form-check-label" for="eleven-twelve">11:00 AM - 12:00 PM</label>
</div>
</div>
<div class="sessionEvening">
<p style="font-weight:bold;">Evening Session</p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="four-five">
<label class="form-check-label" for="four-five">4:00 PM - 5:00 PM</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="five-six">
<label class="form-check-label" for="five-six">5:00 PM - 6:00 PM</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="six-seven">
<label class="form-check-label" for="six-seven">6:00 PM - 7:00 PM</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="seven-eight">
<label class="form-check-label" for="seven-eight">7:00 PM - 8:00 PM</label>
</div>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
您发布的代码中的所有内容似乎都被隐藏了。我认为“用户信息”输入不包括在内。你能创建一个working example 来演示这个问题吗？
-
这与您在 JS 聊天室中要求的不同 - 您是希望周日和周六只显示晚上，还是只显示早上？
-
@showdev 这里是工作示例：jsfiddle.net/humanware/Lpmv5vyv
-
@TylerH 嘿，泰勒，欢迎您。如果有人从 SessionDays 复选框中选择了周六或周日，我将尝试显示早间和晚间部分。
-
@MilanUptech 感谢您的澄清。我们对您的帖子进行了一些编辑以反映这些说明！
标签： javascript jquery html css bootstrap-4