JSFiddle - React, Tailwind, and code Playground

HTML

<label><input type="checkbox" name="check_all">Tout cocher</label>
<ul>
<li><label><input type="checkbox" name="actif" value="1">1</label></li>
<li><label><input type="checkbox" name="actif" value="2">2</label></li>
<li><label><input type="checkbox" name="actif" value="3">3</label></li>
</ul>

JavaScript

$(document).on('click', 'input[name="check_all"]', function(e) {
	if($(this).is(':checked')) {
		$('input[name="actif"]').attr('checked', true).trigger('change');
	} else {
		$('input[name="actif"]').attr('checked', false).trigger('change');
	}
});
$(document).on('change', 'input[name="actif"]', function(evt) {
	alert($(evt.target).val());
});