代码之家 › 专栏 › 技术社区 › Milan Bastola

在多个复选框选择上显示某些div无效

bootstrap-4 css html jquery javascript

Milan Bastola · 技术社区 · 8 年前

我有一个带有七个复选框的部分,它们是星期天、星期一、星期二、星期三、星期四、星期五和;星期六我还有两个带有其他复选框的其他部分,它们是上午会话部分&晚间课程部分。

现在我需要做的是,如果有人在sessionDays中选择从周日到周五的任何一天,那么它应该显示上午会话部分和晚上会话部分。但如果有人选中“周六”或“周日”复选框,则应仅显示“上午会话”部分。

我尝试过使用下面的代码来实现这一点,但它只显示Morning&周一选择的晚上部分。如果选择了其他日期,则不会显示任何内容。

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/

2 回复 | 直到 8 年前

raviook 8 年前

根据您的要求,我在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>

Thijn 8 年前

我在星期五和星期六的复选框中添加了一个周末班,在其他日子添加了一个工作日班。

编辑: 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/