<form>
  <header>
    <h3>Ваш любимый вид спорта</h3>
    <div class="form-element element-checkbox">
      <input type="checkbox" name="select-all" id="select-all" />
      <label for="select-all">Выбрать все</label>
    </div>
  </header>
  <div id="activities" class="form-element element-checkboxes">
    <ul>
      <li class="element-checkbox"><label for="football"><i class="material-icons">sports_soccer</i><input type="checkbox" name="activities[]" value="football" id="football" /><span>Футбол</span></label></li>
      <li class="element-checkbox"><label for="volleyball"><i class="material-icons">sports_volleyball</i><input type="checkbox" name="activities[]" value="volleyball" id="volleyball" /><span>Волейбол</span></label></li>
      <li class="element-checkbox"><label for="basketball"><i class="material-icons">sports_basketball</i><input type="checkbox" name="activities[]" value="baskeball" id="basketball" /><span>Баскетбол</span></label></li>
      <li class="element-checkbox"><label for="tennis"><i class="material-icons">sports_tennis</i><input type="checkbox" name="activities[]" value="tennis" id="tennis" /><span>Теннис</span></label></li>
    </ul>
  </div>
</form>
form {
  margin:60px auto;
  width: 80%;
  font: 16px Roboto;
}

header {
  padding-bottom: 6px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,.2);
  position: relative;
}

header .form-element {
  position: absolute;
  top: 6px;
  right: 0;
}

h3 {
  font-size: 24px;
}

.form-element {
  margin-bottom: 24px;
}

.element-checkbox label {
  cursor: pointer;
  user-select: none;
}

#activities label {
  display: block;
}

.element-checkbox input {
  margin-right: 6px;
}

#activities ul {
  display: flex;
  justify-content: space-between;
}

#activities ul li {
  padding: 12px;
  text-align: center;
  width: 20%;
  border-radius: 6px;
}

#activities ul li i {
  display: block;
  font-size: 90px;
  margin-bottom: 12px;
  color: rgba(0,0,0,.5)
}

#activities ul li.selected {
  background: #efefef;
}

#activities ul li.selected i {
  color: #2196f3;
}
jQuery(document).ready(function($){
  $('input[name="select-all"]').on('change', function(){
    if($(this).is(':checked')){
      $('#activities').find('input[type="checkbox"]')
        .prop('checked', true)
        .change();
    } else {
      $('#activities').find('input[type="checkbox"]')
        .prop('checked', false)
        .change();
    }
  });
  
  $('#activities').on('change', 'input[type="checkbox"]', function(){
    if($(this).is(':checked')){
      $(this).closest('li').addClass('selected');
    } else {
      $(this).closest('li').removeClass('selected');
    }
  });
});

External CSS

  1. https://fonts.googleapis.com/css2?family=Roboto:wght@300&amp;display=swap
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js