JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
	<label class="label"><input type="checkbox" name="test" data-action="counter" value="1">Первый</label>
	<label class="label"><input type="checkbox" name="test" data-action="counter" value="2">Второй</label>
	<label class="label"><input type="checkbox" name="test" data-action="counter" value="3">Третий</label>
	<label class="label"><input type="checkbox" name="test" data-action="counter" value="4">Четвёртый</label>
</form>

CSS

.label {
	padding: 10px 20px;
	background: #f0f0f0;
}
.label > input[type="checkbox"] {
	display: none;
}
.label.active {
	color: #fff;
	background: #f60;
}

JavaScript

$(function () {
	var counters = $('[data-action="counter"]').on('change', function (e) {
		var $input = $(this);

		$input.closest('label').toggleClass('active', $input.is(':checked'));
		console.log(counters.filter(':checked').length);
	});
});