JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<a class="all" href="#">отметить все</a><br />
	<a class="clear" href="#">очистить все</a>
</div>

<label>
	<input type="checkbox" checked="checked" />
	<span></span>
</label>
<label>
	<input type="checkbox" />
	<span></span>
</label>
<label>
	<input type="checkbox" />
	<span></span>
</label>

CSS

label {position: relative; display: block; margin-bottom: 5px; width: 82px; height: 62px; background: grey; cursor: pointer;}
	input[type="checkbox"] {display: none;}
	span:before {content: ""; position: absolute; left: 1px; top: 1px; display: block; width: 9px; height: 9px; background: #fff; border: 1px solid #bababa;}
	input[type="checkbox"]:checked + span:before {background: #000;}

JavaScript

$('a.all').click(function () {
	$('input:checkbox').attr('checked', 'checked');
	return false;
});
$('a.clear').click(function () {
	$('input:checkbox').removeAttr('checked');
	return false;
});