Нужна помощь, если ни один из флажков не установлен, сделайте что-нибудь

На моем веб-сайте "Сортировка по категории" работает нормально, когда вы устанавливаете флажки, она добавляет каждую из категорий и скрывает остальные.

Что я хочу сделать, так это иметь возможность показывать все элементы категории, если ни один из флажков не установлен, если вы зайдете на сайт и нажмете 2 категории и снимите флажок, вы заметите, что он будет пустым.

Элементом CSS для сообщений является class = "rp-item".

Вот как выглядит моя категория,

function categorySort() {      
  $('#CategorySort').attr('firstclick', true);

  $('.cat-sort-toggle').click(function() {
    $('.cat-sort-bar').toggle(500);
  });

  $('.cat-sort-check').change(function() {
    if ( $('#CategorySort').attr('firstclick') == 'true') {
      $('.rp-item').css('display', 'none');
      $('#CategorySort').attr('firstclick', false);
    }

    $objectString = '.' + $(this).attr('showclass');

    if ( $(this).is(':checked') ) {
      $($objectString).show(500);
    } else {
      $($objectString).hide(500);
    }
  });
}

/* the code below was the one i tried to fix the issue,
what it did is it kinda worked but everytime i click the
2nd time on any of the check boxes or just switch
checkboxes it brings everything back instead of only
the posts from the checkbox. Thanks! */ 

else{
  $('.rp-item').css('display', 'inline-block');
  $('#CategorySort').attr('firstclick', true);
} 

2 ответа

Вы можете проверить, если ни один из флажков не отмечен

if($('input[type="checkbox"]:checked').length < 1){
   alert('No one checked');
}

Примечание. Этот код является просто базовым. Проверьте сами классы и идентификаторы и обновите этот код в случае необходимости.

$("input[type='checkbox' class='rp-item']:checked") дает вам список флажков, которые проверены. Затем вы можете закрепить его внутри if:

if($("input[type='checkbox' class='rp-item']:checked").length > 0){
    // Do Something
}

И напишите свою логику приложения внутри него.

Подход "jQuery-less":

var checkboxes = document.getElementsByClassName("rp-item");
var nothingChecked = true;
for(var i = 0; i < checkboxes.length; i++) {
    if(checkboxes[i].checked == false)
        continue;
    else
        nothingChecked = false;
}
if(nothingChecked == true) {
    // Do Something
}
Другие вопросы по тегам