Отображение определенных элементов div для выбора нескольких флажков не работает - PullRequest
Новая
       2

Отображение определенных элементов div для выбора нескольких флажков не работает

0 голосов
/ 18 мая 2018

У меня есть раздел с семью флажками, это воскресенье, понедельник, вторник, среда, четверг, пятница и суббота.У меня также есть два других раздела с другими флажками, это раздел «Утренняя сессия» и «Вечерняя сессия».

Теперь, что мне нужно сделать, это если кто-то выберет любой день с воскресенья по пятницу в 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>

Пример работы: https://jsfiddle.net/humanware/Lpmv5vyv/

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

в соответствии с вашим требованием я использовал карту в jquery и присвоил значение флажку, вот код: 

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>

0 голосов
/ 18 мая 2018

Я добавил урок выходного дня в флажки пятницы и субботы и урок дня недели в другие дни.

РЕДАКТИРОВАТЬ: 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...