JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <input type="checkbox" name="checkAll"> все
</label>

<hr>

<div class="domains">
  <label>
    <input type="checkbox"> ru
  </label>
  <label>
    <input type="checkbox"> su
  </label>
  <label>
    <input type="checkbox"> com
  </label>
  <label>
    <input type="checkbox"> org
  </label>
  <label>
    <input type="checkbox"> net
  </label>
</div>

CSS

.domains label {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0;
}
.domains label.active {
  background-color: #9acd32;
}

JavaScript

$('.domains').on('change', ':checkbox', function(){
	$(this).closest('label').toggleClass('active', this.checked)
})

$('[name="checkAll"]').on('click', function(){
  var state = this.checked
	$('.domains label').each(function(){
  	$(this).toggleClass('active', state)
    .find(':checkbox').prop('checked', state)
  })
})