在多个复选框选择中显示某些div不起作用

Question

我有一个包含七个复选框的部分，它们是星期日，星期一，星期二，星期三，星期四，星期五和星期五。星期六。我还有另外两个部分与其他复选框，他们是早上会议部分＆amp;晚会部分。

现在我需要做的是，如果有人在sessionDays中从星期日到星期五选择任何一天，那么它应该显示早晨会话部分和晚间会话部分。但如果有人选择星期六或星期日复选框，它应该只显示早上会话部分。

我尝试过使用下面的代码，但它只显示了Morning＆amp;周一晚上选择。如果选择其他日期，则不显示任何内容。

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>

工作示例：https://jsfiddle.net/humanware/Lpmv5vyv/

Answer 1

我在星期五和星期六的复选框以及其他日子的工作日课程中添加了周末课程。

编辑： HTML：

<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 weekend" type="checkbox" value="" id="sessionSunday">
            <label class="form-check-label" for="sessionSunday">
            Sunday
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input weekday" type="checkbox" value="" id="sessionMonday">
            <label class="form-check-label" for="sessionMonday">
            Monday
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input weekday" type="checkbox" value="" id="sessionTuesday">
            <label class="form-check-label" for="sessionTuesday">
            Tuesday
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input weekday" type="checkbox" value="" id="sessionWednesday">
            <label class="form-check-label" for="sessionWednesday">
            Wednesday
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input weekday" type="checkbox" value="" id="sessionThursday">
            <label class="form-check-label" for="sessionThursday">
            Thursday
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input weekday" type="checkbox" value="" id="sessionFriday">
            <label class="form-check-label" for="sessionFriday">
                Friday
            </label>
        </div>
        <div class="form-check">
            <input class="form-check-input weekend" 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>

然后这应该是所有的jQuery：

jQuery(function ($) {
    $('.sessionMorning').hide();
    $('.sessionEvening').hide();

    $('.weekday, .weekend').on('change', function () {
        var weekdayChecked = false;
        var weekendChecked = false;
        $('.weekday, .weekend').each(function (index, input) {
            if ($(this).hasClass('weekday') && $(this).is(':checked')) {
                weekdayChecked = true;
            }
            else if ($(this).hasClass('weekend') && $(this).is(':checked')) {
                weekendChecked = true;
            }

            if (weekdayChecked) {
                $('.sessionMorning').show();
                $('.sessionEvening').show();
            }
            else if (weekendChecked) {
                $('.sessionMorning').show();
                $('.sessionEvening').hide();
            }
            else {
                $('.sessionMorning').hide();
                $('.sessionEvening').hide();
            }

        });
    });
});

https://jsfiddle.net/4h7z5ovj/1/

Answer 2

根据您的要求，我在jquery中使用了map并将值赋给了checkbox，这里是代码：

jQuery(function ($) {
    var sessionDays = $('.sessionDays');
    var sessionMorning = $('.sessionMorning');
    var sessionEvening = $('.sessionEvening');
    //Hide required DIVs
    sessionDays.hide();
    sessionMorning.hide();
    sessionEvening.hide();

    $("#selectSessionType").change(function () {
        if (!$(this).val()) {
            sessionDays.hide();
        } else {
            sessionDays.show();
        }
    }).change();
    $(".sessionDays").change(function () {
        sessionMorning.hide();
        sessionEvening.hide();
        $('.form-check-input:checked').map(function () {
            if (
                this.value == 'Monday' ||
                this.value == 'Tuesday' ||
                this.value == 'Wednesday' ||
                this.value == 'Thursday' ||
                this.value == 'Friday') {
                sessionMorning.show();
                sessionEvening.show();
                exit();
            } else if (this.value == 'Saturday' ||
                this.value == 'Sunday') {
                sessionMorning.show();
                sessionEvening.hide();
            } else {
                sessionMorning.hide();
                sessionEvening.hide();
            }
        });
    }).change();}

修改HTML：

<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="Sunday" id="sessionSunday">
                <label class="form-check-label" for="sessionSunday">
                    Sunday
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="Monday" id="sessionMonday">
                <label class="form-check-label" for="sessionMonday">
                    Monday
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="Tuesday" id="sessionTuesday">
                <label class="form-check-label" for="sessionTuesday">
                    Tuesday
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="Wednesday" id="sessionWednesday">
                <label class="form-check-label" for="sessionWednesday">
                    Wednesday
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="Thursday" id="sessionThursday">
                <label class="form-check-label" for="sessionThursday">
                    Thursday
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="Friday" id="sessionFriday">
                <label class="form-check-label" for="sessionFriday">
                    Friday
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="Saturday" 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>