Выбрать все CheckBox

Выбрать все CheckBox: - все выбранные - все не выбранные

by Denis Tverdokhlebov

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.js"></script>
<div class="showAllBox">
  <div class="checkBody">
    <input type="checkbox" class="checkbox inputcheck showAll" id="checkbox" value="" />
    <label for="checkbox">Показать все</label>
  </div>
</div>

<div class="inpDiv">
  <div><input type="checkbox" class="classic" value="" checked> Пример on <br></div>
  <div><input type="checkbox" class="classic" value="" checked> Пример on <br></div>

  <div><input type="checkbox" class="classic" value=""> Пример off <br></div>
  <div><input type="checkbox" class="classic" value=""> Пример off <br></div>

  <div><input type="checkbox" class="classic" value="" checked> Пример on <br></div>
  <div><input type="checkbox" class="classic" value=""> Пример off <br></div>
</div>

CSS

/* стили страницы */

body {
  padding: 10px 20px;
}

/* стили fontawesome */

i.fa.fa-toggle-on,
i.fa.fa-toggle-off,
i.fas.fa-link {
  padding: 0 15px 0px 0px;
}

/* стилизация чекбоксов */

/* стили требуется задавать для КАЖДОГО чекбокса отдельно */

.checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 20px;
}

.checkbox+label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
}

.checkbox+label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2);
  transition: .2s;
}

.checkbox+label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: .2s;
}

.checkbox:checked+label:before {
  background: #9FD468;
}

.checkbox:checked+label:after {
  left: 26px;
}

.checkbox:focus+label:before {
  /* box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); */
}

.radio {
  position: absolute;
  z-index: -1;
  opacity: 0;
  margin: 10px 0 0 7px;
}

.radio+label {
  position: relative;
  padding: 0 0 0 35px;
  cursor: pointer;
}

.radio+label:before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #CDD1DA;
  border-radius: 50%;
  background: #FFF;
}

.radio+label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9FD468;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: .2s;
}

.radio:checked+label:after {
  opacity: 1;
}

.radio:focus+label:before {
  box-shadow: 0 0 0 3px rgba(255, 255, 0, .7);
}

/* стили оболочек */

.showAllBox {
  padding: 10px 0px 10px 0px;
  width: 185px;
  height: 50px;
}

.checkBody {
  margin: 15px 0 0 0;
}

.inpDiv div {
 ...

JavaScript

$(document).ready(function() {
  //поиск всех чекбоксов что не нажаты
  $('.inpDiv input:checkbox:not(:checked)').each(function() {
    $(this).closest("div").addClass("checkOn");
  });
  //поиск всех чекбоксов что нажаты
  $('.inpDiv input:checkbox:checked').each(function() {
    $(this).closest("div").addClass("checkOff");
  });
  //переключение видимости у скрытых элементов по классу
  $(".showAll").on('change', function() {
    $("[class^=checkOff]").toggle();
  });
  //уведомления начало ->

  //Создаем два произвольных класса с настройками для уведомлений
  $.notify.addStyle('NotyOn', {
    html: "<div><i class='fa fa-toggle-on' aria-hidden='true'></i><span data-notify-text/></div>",
    classes: {
      turnOn: {
        "white-space": "nowrap",
        "background-color": "#66b361",
        "padding": "10px 20px",
        "color": "#ffffff",
        "border-radius": "5px",
      }
    }
  });
  $.notify.addStyle('NotyOff', {
    html: "<div><i class='fa fa-toggle-off' aria-hidden='true'></i><span data-notify-text/></div>",
    classes: {
      turnOff: {
        "white-space": "nowrap",
        "background-color": "#62000f",
        "padding": "10px 20px",
        "color": "#ffffff",
        "border-radius": "5px",
      }
    }
  });

  $.notify.addStyle('NotyLink', {
    html: "<div><a target='_blank' class='notyLinkA' href='https://www.yandex.ru/'><i class='fas fa-link'></i><span data-notify-text/></a></div>",
    classes: {
      turnLink: {
        "white-space": "nowrap",
        "background-color": "#16a1e7",
        "padding": "10px 20px",
        "color": "#ffffff",
        "border-radius": "5px",
      }
    }
  });
  //задаем уведомление по умолчанию для оповещения о скрытых объектах
  $('.showAllBox').notify(
    "Перейти по ссылке", {
      position: 'right',
      className: "turnLink",
      style: 'NotyLink',
      autoHide: false
    }
  )
  //задаем вывод уведомлений на клик по чекбоксу
  $('#checkbox').on("click", function() {

    if...